From f20203cac8bc3412e569b81df12ac1d43beb71e8 Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Fri, 29 Dec 2023 23:59:45 -0300
Subject: [PATCH] productpreview en search

---
 sitio/src/lib/ProductPreview.svelte     | 8 ++++++++
 sitio/src/routes/search/+page.server.ts | 6 ++++--
 sitio/src/routes/search/+page.svelte    | 9 ++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 sitio/src/lib/ProductPreview.svelte

diff --git a/sitio/src/lib/ProductPreview.svelte b/sitio/src/lib/ProductPreview.svelte
new file mode 100644
index 0000000..cf377b9
--- /dev/null
+++ b/sitio/src/lib/ProductPreview.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let product: { ean: string; name: string; imageUrl: string };
+</script>
+
+<a href={`/ean/${product.ean}`} class="flex">
+  <img src={product.imageUrl} alt={product.name} class="max-h-48" />
+  <p class="text-xl">{product.name}</p>
+</a>
diff --git a/sitio/src/routes/search/+page.server.ts b/sitio/src/routes/search/+page.server.ts
index 1cc696a..65f2783 100644
--- a/sitio/src/routes/search/+page.server.ts
+++ b/sitio/src/routes/search/+page.server.ts
@@ -6,10 +6,12 @@ const { precios } = schema;
 
 export const load: PageServerLoad = async ({ url }) => {
   const query = url.searchParams.get("q");
-  let results: null | { ean: string; name: string }[] = null;
+  let results: null | { ean: string; name: string; imageUrl: string }[] = null;
   if (query) {
     results = db.all(
-      sql`select ean, name from precios_fts where name match ${query};`,
+      sql`select p.ean, p.name, p.image_url as imageUrl from precios_fts f
+      join precios p on p.ean = f.ean
+      where f.name match ${query};`,
     );
   }
 
diff --git a/sitio/src/routes/search/+page.svelte b/sitio/src/routes/search/+page.svelte
index a7ef847..401ff16 100644
--- a/sitio/src/routes/search/+page.svelte
+++ b/sitio/src/routes/search/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ProductPreview from "$lib/ProductPreview.svelte";
   import type { PageData } from "./$types";
 
   export let data: PageData;
@@ -8,12 +9,10 @@
   <header class="my-2">
     <h1 class="text-2xl font-bold">Resultados para "{data.query}"</h1>
   </header>
-  <ul>
-    {#each data.results as result}
+  <ul class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+    {#each data.results as product}
       <li>
-        <a href={`/ean/${result.ean}`}>
-          {result.name}
-        </a>
+        <ProductPreview {product} />
       </li>
     {/each}
   </ul>