Kevin
129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3'
|
|
|
|
defineProps<{ computers: any[] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-3xl font-semibold text-gray-700">Computers</h3>
|
|
|
|
<Link
|
|
href="/computers/create"
|
|
type="button"
|
|
as="button"
|
|
class="inline-flex shrink-0 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
|
|
>
|
|
Add
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<template v-if="computers.length > 0">
|
|
<div
|
|
v-for="computer in computers"
|
|
:key="computer.id"
|
|
class="p-4 border rounded-lg shadow hover:shadow-lg transition"
|
|
>
|
|
<h4 class="font-semibold text-lg text-gray-800">{{ computer.title }}</h4>
|
|
<p class="text-gray-600">State: {{ computer.state?.name }}</p>
|
|
<p class="text-indigo-600 font-semibold">Price: ${{ computer.sellPrice }}</p>
|
|
<p class="text-gray-500 text-sm">{{ computer.components.length }} components</p>
|
|
<Link
|
|
:href="`/computers/${computer.id}`"
|
|
class="mt-2 inline-block text-indigo-600 hover:text-indigo-700"
|
|
>
|
|
View Details
|
|
</Link>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<p class="text-gray-500">No computers yet. Create one to get started!</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.computers-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.computers-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.computer-card {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: #f3f4f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.no-image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.card-content {
|
|
padding: 1rem;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-content h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.card-content p {
|
|
color: #6b7280;
|
|
margin: 0 0 1rem 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.card-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
}
|
|
</style>
|