product preview en index

sitio/src/routes/+page.server.ts

@@ -6,7 +6,11 @@ import { sql } from "drizzle-orm";
 
 export const load: PageServerLoad = async ({ params }) => {
   const q = db
-    .select({ ean: precios.ean, name: precios.name })
+    .select({
+      ean: precios.ean,
+      name: precios.name,
+      imageUrl: precios.imageUrl,
+    })
     .from(precios)
     .groupBy(precios.ean)
     .having(sql`max(length(name))`)

sitio/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ProductPreview from "$lib/ProductPreview.svelte";
   import type { PageData } from "./$types";
 
   export let data: PageData;
@@ -30,12 +31,10 @@
 
 <section>
   <h2 class="text-lg font-bold">Random</h2>
-  <ul>
+  <ul class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
     {#each data.precios as product}
       <li>
-        <a href={`/ean/${product.ean}`}>
-          {product.name}
-        </a>
+        <ProductPreview {product} />
       </li>
     {/each}
   </ul>