brian/laravel-shopping-cart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

products now have an image

Browse Source
This commit is contained in:
Brian
2026-04-09 18:40:09 -06:00
parent 6d6194eeb6
commit 519f944139
6 changed files with 66 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/Home.vue
+19 -7
View File
@@ -6,6 +6,7 @@ interface Product {
name: string;
description: string;
price_cents: number;
image_url: string | null;
}
defineProps<{
@@ -22,21 +23,32 @@ function formatPrice(cents: number): string {
<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] lg:p-8">
<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">Products</h1>
<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 products available.</p>
<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="rounded-lg border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800"
class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
>
<h2 class="mb-1 font-medium capitalize">{{ product.name }}</h2>
<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
<p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
<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="p-5">
<h2 class="mb-1 font-medium capitalize">{{ product.name }}</h2>
<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
<p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
</div>
</div>
</div>
</main>