62 lines
2.6 KiB
Vue
62 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
|
|
interface Product {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
price_cents: number;
|
|
image_url: string | null;
|
|
}
|
|
|
|
defineProps<{
|
|
products: Product[];
|
|
}>();
|
|
|
|
function formatPrice(cents: number): string {
|
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(cents / 100);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Shop">
|
|
<link rel="preconnect" href="https://rsms.me/" />
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
|
</Head>
|
|
<div class="min-h-screen bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] dark:text-[#FDFDFC] lg:p-8">
|
|
<header class="mx-auto mb-8 max-w-4xl">
|
|
<h1 class="text-2xl font-semibold">Packages</h1>
|
|
</header>
|
|
<main class="mx-auto max-w-4xl">
|
|
<p v-if="products.length === 0" class="text-gray-500">No packages available.</p>
|
|
<div v-else class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div
|
|
v-for="product in products"
|
|
:key="product.id"
|
|
class="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
|
|
>
|
|
<img
|
|
v-if="product.image_url"
|
|
:src="product.image_url"
|
|
:alt="product.name"
|
|
class="h-48 w-full object-cover"
|
|
/>
|
|
<div v-else class="flex h-48 items-center justify-center bg-gray-100 dark:bg-gray-700">
|
|
<span class="text-sm text-gray-400">No image</span>
|
|
</div>
|
|
<div class="flex flex-1 flex-col p-5">
|
|
<h2 class="mb-1 font-medium capitalize">{{ product.name }}</h2>
|
|
<p class="mb-4 grow text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
|
|
<button type="button" class="rounded-md bg-gray-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|