Initial commit: Hoomat storefront with Meshkee API and static-image slots.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-04 15:00:41 +03:30
commit cfabf3e327
95 changed files with 12651 additions and 0 deletions
@@ -0,0 +1,111 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { CartDrawer } from "@/app/components/cart-drawer";
+import { ProductsMegaMenu } from "@/app/components/products-mega-menu";
+import { UserMenu } from "@/app/components/user-menu";
+import { useCart } from "@/app/providers/cart-provider";
+import { site } from "@/lib/site-data";
+import type { Category } from "@/lib/meshkee/types";
+
+const navLinks = [
+  { label: "درباره ما", href: "/about-us" },
+  { label: "تماس با ما", href: "/contactus" },
+  { label: "مجله دکوراسیون", href: "/blog" },
+];
+
+export function Header({ categories }: { categories: Category[] }) {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { itemCount, setOpen } = useCart();
+
+  useEffect(() => {
+    const updateHeader = () => setIsScrolled(window.scrollY > 12);
+    updateHeader();
+    window.addEventListener("scroll", updateHeader, { passive: true });
+    return () => window.removeEventListener("scroll", updateHeader);
+  }, []);
+
+  return (
+    <>
+      <header className={`header ${isScrolled ? "is-scrolled" : ""}`}>
+        <div className="container header-inner">
+          <Link className="brand" href="/" aria-label={site.name}>
+            <Image src={site.logo} alt={site.name} width={291} height={50} priority />
+          </Link>
+          <nav className="nav" aria-label="ناوبری اصلی">
+            <ProductsMegaMenu categories={categories} />
+            {navLinks.map((item) => (
+              <Link key={item.href} href={item.href}>
+                {item.label}
+              </Link>
+            ))}
+            <div className="nav-icons">
+              <button
+                type="button"
+                className="header-icon-btn cart-trigger"
+                aria-label="سبد خرید"
+                onClick={() => setOpen(true)}
+              >
+                <CartIcon />
+                {itemCount > 0 ? (
+                  <span className="cart-badge ltr-number" dir="ltr" lang="en">
+                    {itemCount}
+                  </span>
+                ) : null}
+              </button>
+              <UserMenu />
+            </div>
+          </nav>
+          <div className="header-actions">
+            <a
+              className="phone-pill"
+              href={`tel:${site.phone.replaceAll("-", "")}`}
+              aria-label={`شماره تماس ${site.phone}`}
+            >
+              <PhoneIcon />
+              <span className="ltr-number" dir="ltr" lang="en">
+                {site.phone}
+              </span>
+            </a>
+          </div>
+        </div>
+      </header>
+      <CartDrawer />
+    </>
+  );
+}
+
+function CartIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" aria-hidden="true">
+      <path
+        d="M6.4 8.25h11.2l-.72 10.1a1.6 1.6 0 0 1-1.6 1.5H8.72a1.6 1.6 0 0 1-1.6-1.5L6.4 8.25Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.1 8.25V7a2.9 2.9 0 0 1 5.8 0v1.25"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function PhoneIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
+      <path
+        d="M8.2 3.8h2.3l1.1 3.3-1.5 1.1a11.4 11.4 0 0 0 4.7 4.7l1.1-1.5 3.3 1.1v2.3a1.8 1.8 0 0 1-1.8 1.8A13.8 13.8 0 0 1 3.8 5.6 1.8 1.8 0 0 1 5.6 3.8Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}