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,104 @@
+"use client";
+
+import SearchButton from "@/app/search";
+import { t, type Locale } from "@/lib/i18n";
+import type { Item } from "@/lib/items";
+import { useState } from "react";
+
+export default function ItemsResults({
+  initialItems,
+  initialError,
+  locale,
+}: {
+  initialItems: Item[];
+  initialError: string;
+  locale: Locale;
+}) {
+  const [items, setItems] = useState(initialItems);
+  const [error, setError] = useState(initialError);
+
+  function handleResults(nextItems: Item[], nextError: string) {
+    setItems(nextItems);
+    setError(nextError);
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <div className="inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
+          <div>
+            <p className="text-sm text-slate-500">{t(locale, "articles.count")}</p>
+            <p className="mt-1 text-3xl font-bold text-cyan-700">{items.length}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-6 py-4">
+          <h2 className="text-lg font-semibold text-slate-800">
+            {t(locale, "articles.heading")}
+          </h2>
+          <div className="flex flex-wrap items-center gap-2">
+            <input
+              type="text"
+              id="search-input"
+              placeholder={t(locale, "articles.search")}
+              className="h-10 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"
+            />
+            <SearchButton locale={locale} onResults={handleResults} />
+          </div>
+        </div>
+
+        {error && (
+          <div className="m-6 rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
+            {t(locale, "articles.error")}
+          </div>
+        )}
+
+        {items.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-slate-100">
+                  <th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
+                    {t(locale, "articles.code")}
+                  </th>
+                  <th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
+                    {t(locale, "articles.descriptionColumn")}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((item) => (
+                  <tr
+                    key={item.ItemCode}
+                    className="border-t border-slate-100 transition-colors hover:bg-cyan-50"
+                  >
+                    <td className="px-6 py-4 font-mono text-sm font-medium text-cyan-700">
+                      {item.ItemCode}
+                    </td>
+                    <td className="px-6 py-4 text-slate-700">{item.ItemName}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {items.length === 0 && !error && (
+          <div className="py-20 text-center">
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
+              📦
+            </div>
+            <h3 className="text-lg font-semibold text-slate-700">
+              {t(locale, "articles.emptyTitle")}
+            </h3>
+            <p className="mt-2 text-slate-500">
+              {t(locale, "articles.emptyDescription")}
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}