decent search page which should be everything!!

web/src/pages/search.astro

@@ -0,0 +1,78 @@
+---
+import { Recipe } from "@tmlmt/cooklang-parser"
+import { authPB } from "@data/pb";
+import RecipeCard from "@component/index/card"
+import Base from "@layout/Base";
+
+const pb = await authPB()
+
+// Get search query from URL
+const url = new URL(Astro.request.url);
+const query = url.searchParams.get('q') || '';
+
+let recipes: Recipe[] = [];
+let ids: string[] = [];
+let images: string[] = [];
+let totalResults = 0;
+
+if (query) {
+    // Search in title, description, and cooklang content
+    const result = await pb.collection('recipes').getList(1, 50, {
+        filter: `cooklang ~ "${query}"`
+    });
+    
+    totalResults = result.totalItems;
+    recipes = result.items.map((r: any) => new Recipe(r.cooklang));
+    ids = result.items.map((r: any) => r.id);
+    images = await Promise.all(
+        result.items.map((r: any) => '/api' + pb.files.getURL(r, r.images[0]).split('api')[1])
+    );
+}
+---
+
+<Base>
+    <div class="mb-6">
+        <!-- <h1 class="text-3xl font-bold mb-4">Search Recipes</h1> -->
+        
+        <form method="get" class="my-6">
+            <div class="flex gap-2">
+                <input
+                    type="text"
+                    name="q"
+                    value={query}
+                    placeholder="Search recipes..."
+                    class="flex-1 px-4 py-2 rounded-lg bg-[#2a2b2c] text-white border border-gray-600 focus:outline-none focus:border-gray-500"
+                    autofocus
+                />
+                <button
+                    type="submit"
+                    class="px-6 py-2 bg-gray-200/20 hover:bg-gray-200/30 rounded-lg font-semibold transition-colors"
+                >
+                    Search
+                </button>
+            </div>
+        </form>
+
+        {query && (
+            <p class="text-gray-400">
+                {totalResults} result{totalResults !== 1 ? 's' : ''} for "{query}"
+            </p>
+        )}
+    </div>
+
+    {query && recipes.length > 0 && (
+        <div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+            {
+                recipes.map((r, i) => (
+                    <RecipeCard
+                        id={ids[i]}
+                        title={r.metadata.title ?? "Untitled Recipe"}
+                        description={r.metadata.description ?? "No Description"}
+                        tags={r.metadata.tags ?? []}
+                        image={images[i]}
+                    />
+                ))
+            }
+        </div>
+    )}
+</Base>