Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-19 23:51:41 +03:30
parent cd2f9dfc9d
commit 66e604c426
39 changed files with 1900 additions and 188 deletions
@@ -6,7 +6,6 @@ import {
  ChevronDown,
  Heart,
  Menu,
-  Search,
  ShoppingBag,
  UserRound,
  X,
@@ -14,9 +13,12 @@ import {
 import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
 import { MegaMenu } from "@/components/layout/MegaMenu";
-import { categories, navLinks, site } from "@/lib/data";
+import { InstantSearch } from "@/components/layout/InstantSearch";
+import { customerPortalUrl } from "@/lib/config";
+import { navLinks, site } from "@/lib/data";
+import type { NavCategory } from "@/lib/categories";

-export function Header({ logoSrc }: { logoSrc: string }) {
+export function Header({ logoSrc, categories }: { logoSrc: string; categories: NavCategory[] }) {
  const [megaOpen, setMegaOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobileCats, setMobileCats] = useState(false);
@@ -37,32 +39,22 @@ export function Header({ logoSrc }: { logoSrc: string }) {
          <Placeholder src={logoSrc} alt={site.name} className="h-11 w-auto object-contain" />
        </Link>

-        <form className="relative hidden min-w-0 flex-1 md:block">
-          <input
-            type="search"
-            placeholder="جستجوی دارو، مکمل و محصولات بهداشتی..."
-            className="h-11 w-full rounded-xl border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
-          />
-          <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />
-        </form>
+        <InstantSearch />

        <div className="ms-auto flex items-center gap-1">
-          <Link
-            href="#"
+          <a
+            href={customerPortalUrl}
            className="hidden items-center gap-2 rounded-xl px-3 py-2 text-[13px] text-ink hover:bg-mist lg:flex"
          >
            <UserRound className="size-5 text-navy" />
            ورود / ثبت‌نام
-          </Link>
-          <Link href="#" className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقه‌مندی">
+          </a>
+          <a href={customerPortalUrl} className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقه‌مندی">
            <Heart className="size-5 text-navy" />
-          </Link>
-          <Link href="#" className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
+          </a>
+          <a href={customerPortalUrl} className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
            <ShoppingBag className="size-5 text-navy" />
-            <span className="absolute top-1.5 left-1.5 grid size-4 place-items-center rounded-full bg-primary text-[10px] text-white">
-              ۰
-            </span>
-          </Link>
+          </a>
        </div>
      </Container>

@@ -81,7 +73,7 @@ export function Header({ logoSrc }: { logoSrc: string }) {
              دسته‌بندی‌ها
              <ChevronDown className={`size-4 transition ${megaOpen ? "rotate-180" : ""}`} />
            </button>
-            <MegaMenu open={megaOpen} />
+            <MegaMenu open={megaOpen} categories={categories} />
          </div>

          {navLinks.map((link) => (
@@ -111,18 +103,14 @@ export function Header({ logoSrc }: { logoSrc: string }) {
                <X className="size-5" />
              </button>
            </div>
-            <form className="px-4 pt-4">
-              <input
-                type="search"
-                placeholder="جستجو..."
-                className="h-11 w-full rounded-xl border border-line bg-mist px-3 text-[13px] outline-none"
-              />
-            </form>
+            <div className="px-4 pt-4">
+              <InstantSearch compact />
+            </div>
            <nav className="flex-1 overflow-y-auto px-2 py-3">
              <button
                type="button"
                className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-right text-[14px] font-medium text-navy"
-                onClick={() => setMobileCats((v) => !v)}
+                onClick={() => setMobileCats((value) => !value)}
              >
                دسته‌بندی‌ها
                <ChevronDown className={`size-4 ${mobileCats ? "rotate-180" : ""}`} />
@@ -131,9 +119,19 @@ export function Header({ logoSrc }: { logoSrc: string }) {
                <ul className="mb-2 space-y-1 pr-3">
                  {categories.map((cat) => (
                    <li key={cat.id}>
-                      <Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] text-muted">
+                      <Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] font-medium text-navy" onClick={() => setMobileOpen(false)}>
                        {cat.title}
                      </Link>
+                      {cat.children.map((child) => (
+                        <Link
+                          key={child.id}
+                          href={child.href}
+                          className="block rounded-lg px-3 py-1.5 pr-5 text-[13px] text-muted"
+                          onClick={() => setMobileOpen(false)}
+                        >
+                          {child.title}
+                        </Link>
+                      ))}
                    </li>
                  ))}
                </ul>
@@ -148,6 +146,9 @@ export function Header({ logoSrc }: { logoSrc: string }) {
                  {link.title}
                </Link>
              ))}
+              <a href={customerPortalUrl} className="mt-2 block rounded-xl px-3 py-2.5 text-[14px] text-primary">
+                ورود / ثبت‌نام
+              </a>
            </nav>
          </aside>
        </div>
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+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 }: { compact?: boolean }) {
+  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]);
+
+  return (
+    <div ref={box} className={`relative ${compact ? "w-full" : "hidden min-w-0 flex-1 md:block"}`}>
+      <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 border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
+      />
+      <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />
+
+      {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,38,133,0.12)]">
+          {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-mist"
+                      onClick={() => setOpen(false)}
+                    >
+                      <span className="grid size-12 shrink-0 overflow-hidden rounded-lg bg-sky">
+                        <Placeholder
+                          src={item.productImage || "/placeholders/product.svg"}
+                          className="size-full object-cover"
+                        />
+                      </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>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
@@ -1,41 +1,49 @@
 "use client";

 import Link from "next/link";
-import { categories } from "@/lib/data";
 import { Placeholder } from "@/components/Placeholder";
+import type { NavCategory } from "@/lib/categories";

-export function MegaMenu({ open }: { open: boolean }) {
+export function MegaMenu({ open, categories }: { open: boolean; categories: NavCategory[] }) {
  if (!open) return null;

+  const list = categories.length ? categories : [];
+
  return (
    <div className="absolute top-full right-0 z-50 mt-2 w-[min(920px,calc(100vw-2rem))] rounded-2xl border border-line bg-white p-5 shadow-[0_16px_40px_rgba(0,38,133,0.12)]">
-      <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
-        {categories.map((category) => (
-          <div key={category.id}>
-            <Link
-              href={category.href}
-              className="mb-3 flex items-center gap-2 text-[13.5px] font-semibold text-navy"
-            >
-              <span className="grid size-9 place-items-center overflow-hidden rounded-xl bg-sky">
-                <Placeholder src={category.image} className="size-full object-cover" />
-              </span>
-              {category.title}
-            </Link>
-            <ul className="space-y-1.5 pr-1">
-              {category.children.map((child) => (
-                <li key={child.title}>
-                  <Link
-                    href={child.href}
-                    className="block rounded-lg px-2 py-1 text-[12.5px] text-muted transition hover:bg-sky hover:text-primary"
-                  >
-                    {child.title}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
+      {list.length === 0 ? (
+        <p className="text-[13px] text-muted">دسته‌بندی‌ها به‌زودی اضافه می‌شوند.</p>
+      ) : (
+        <div className="grid grid-cols-2 gap-5 md:grid-cols-3 lg:grid-cols-4">
+          {list.map((category) => (
+            <div key={category.id}>
+              <Link
+                href={category.href}
+                className="mb-3 flex items-center gap-2 text-[13.5px] font-semibold text-navy"
+              >
+                <span className="grid size-9 place-items-center overflow-hidden rounded-xl bg-sky">
+                  <Placeholder src={category.image || "/placeholders/category.svg"} className="size-full object-cover" />
+                </span>
+                {category.title}
+              </Link>
+              {category.children.length ? (
+                <ul className="space-y-1.5 pr-1">
+                  {category.children.map((child) => (
+                    <li key={child.id}>
+                      <Link
+                        href={child.href}
+                        className="block rounded-lg px-2 py-1 text-[12.5px] text-muted transition hover:bg-sky hover:text-primary"
+                      >
+                        {child.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      )}
    </div>
  );
 }