From d59b4283bca83c66e1533bbc60596cb92076483b Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Sat, 30 Dec 2023 00:02:02 -0300
Subject: [PATCH] product preview en index

---
 sitio/src/routes/+page.server.ts | 6 +++++-
 sitio/src/routes/+page.svelte    | 7 +++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/sitio/src/routes/+page.server.ts b/sitio/src/routes/+page.server.ts
index 0765e3e..4da120a 100644
--- a/sitio/src/routes/+page.server.ts
+++ b/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))`)
diff --git a/sitio/src/routes/+page.svelte b/sitio/src/routes/+page.svelte
index b3eef74..349bd3b 100644
--- a/sitio/src/routes/+page.svelte
+++ b/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>