112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|