Zoek functie voor items toegevoegd

2026-08-19 17:15:28 +02:00
parent 686339325e
commit 16cee03332
5 changed files with 174 additions and 80 deletions
@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import { t, type Locale } from "@/lib/i18n";
+import { searchItems, type Item } from "@/lib/items";
+
+export default function SearchButton({
+    locale,
+    onResults,
+}: {
+    locale: Locale;
+    onResults: (items: Item[], error: string) => void;
+}) {
+    const [loading, setLoading] = useState(false);
+
+    async function handleSearch() {
+        const query = (document.getElementById("search-input") as HTMLInputElement)?.value.trim();
+        if (!query) return;
+
+        setLoading(true);
+
+        try {
+            const result = await searchItems(query);
+            onResults(result.items, result.error);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <>
+            <input type="text" id="search-input" placeholder={t(locale, "articles.search")} className="ml-2 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100" />
+            <button
+                type="button"
+                onClick={handleSearch}
+                className="inline-flex h-10 items-center rounded-lg bg-white/10 px-4 text-sm font-semibold text-white ring-1 ring-white/30 transition hover:bg-white/20"
+            >
+                {loading ? t(locale, "articles.loading") : t(locale, "articles.search")}
+            </button>
+        </>
+    );
+}