productpreview en search

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>

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};`,
     );
   }
 

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>