Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 16:04:31 +03:30
parent cfa21cbee9
commit 8e14748b48
29 changed files with 1460 additions and 244 deletions
@@ -0,0 +1,125 @@
+"use client";
+
+import { FormEvent, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Search } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+import { formatPrice } from "@/lib/format";
+import { variantTitle, type StoreVariant } from "@/lib/store";
+
+export function InstantSearch({ compact = false, className = "" }: { compact?: boolean; className?: string }) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [items, setItems] = useState<StoreVariant[]>([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const box = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      if (!box.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+
+  useEffect(() => {
+    const value = query.trim();
+    if (value.length <= 2) {
+      setItems([]);
+      setOpen(false);
+      setLoading(false);
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/search?q=${encodeURIComponent(value)}`);
+        const data = (await response.json()) as { items?: StoreVariant[] };
+        setItems(data.items ?? []);
+        setOpen(true);
+      } catch {
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 250);
+
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  const goToProducts = (event?: FormEvent) => {
+    event?.preventDefault();
+    const value = query.trim();
+    if (value.length <= 2) return;
+    setOpen(false);
+    router.push(`/products?q=${encodeURIComponent(value)}`);
+  };
+
+  return (
+    <div ref={box} className={`relative ${className || (compact ? "w-full" : "hidden min-w-0 flex-1 md:block")}`}>
+      <form onSubmit={goToProducts}>
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={() => {
+            if (query.trim().length > 2) setOpen(true);
+          }}
+          placeholder={compact ? "جستجوی محصول..." : "جستجوی محصول و قطعه..."}
+          className="h-11 w-full rounded-xl bg-paper pe-4 ps-10 text-[13px] outline-none placeholder:text-muted/70 focus:bg-white focus:ring-1 focus:ring-brand"
+        />
+        <Search className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted" />
+      </form>
+
+      {open ? (
+        <div className="absolute inset-x-0 top-[calc(100%+8px)] z-50 overflow-hidden rounded-2xl border border-line bg-white shadow-[0_16px_40px_rgba(0,0,0,0.1)]">
+          {loading ? (
+            <p className="px-4 py-3 text-[13px] text-muted">در حال جستجو...</p>
+          ) : items.length === 0 ? (
+            <p className="px-4 py-3 text-[13px] text-muted">نتیجه‌ای پیدا نشد.</p>
+          ) : (
+            <>
+              <ul className="max-h-[360px] overflow-y-auto py-2">
+                {items.map((item) => {
+                  const price = item.discountedPrice ?? item.price;
+                  return (
+                    <li key={item.id}>
+                      <Link
+                        href={`/products/${encodeURIComponent(item.id)}`}
+                        className="flex items-center gap-3 px-3 py-2 hover:bg-paper"
+                        onClick={() => setOpen(false)}
+                      >
+                        <span className="grid size-12 shrink-0 overflow-hidden rounded-lg bg-paper">
+                          <Placeholder
+                            src={item.productImage || "/placeholders/product.svg"}
+                            className="size-full object-contain"
+                          />
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span className="line-clamp-1 text-[13px] text-ink">{variantTitle(item)}</span>
+                          <span className="mt-0.5 block text-[12px] text-muted">
+                            {price != null ? `${formatPrice(price)} تومان` : "تماس بگیرید"}
+                          </span>
+                        </span>
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+              <button
+                type="button"
+                onClick={() => goToProducts()}
+                className="block w-full border-t border-line px-4 py-3 text-center text-[13px] font-medium text-brand hover:bg-paper"
+              >
+                مشاهده همه نتایج در محصولات
+              </button>
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}