Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
2783305f07
commit
7d26eaa838
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { cartCount } from "@/lib/cart";
|
||||
import { parentCategories } from "@/lib/data";
|
||||
import { SITE } from "@/lib/site";
|
||||
import { IconCart, IconChevron, IconClose, IconMenu, IconUser } from "./Icons";
|
||||
import { SearchBox } from "./SearchBox";
|
||||
|
||||
const nav = [
|
||||
{ name: "فروش ویژه", href: "#special-sale" },
|
||||
{ name: "درباره ما", href: "/aboutus" },
|
||||
{ name: "سوالات متداول", href: "/frequently-asked-questions" },
|
||||
{ name: "تماس با ما", href: "/contactus" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mega, setMega] = useState(false);
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const sync = () => setCount(cartCount());
|
||||
sync();
|
||||
window.addEventListener("cart-updated", sync);
|
||||
window.addEventListener("storage", sync);
|
||||
return () => {
|
||||
window.removeEventListener("cart-updated", sync);
|
||||
window.removeEventListener("storage", sync);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white border-b border-black/5">
|
||||
<div className="container-site flex h-[76px] items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden grid place-items-center w-10 h-10 text-ink"
|
||||
aria-label="منو"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<IconMenu />
|
||||
</button>
|
||||
|
||||
<Link href="/" className="shrink-0">
|
||||
<Image src="/images/logo/logo.png" alt={SITE.nameFa} width={150} height={40} className="h-10 w-auto" priority />
|
||||
</Link>
|
||||
|
||||
<nav className="hidden lg:flex items-center gap-1 mr-4 text-sm">
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setMega(true)}
|
||||
onMouseLeave={() => setMega(false)}
|
||||
>
|
||||
<Link
|
||||
href="/products"
|
||||
className="flex items-center gap-1 px-3 py-2 rounded-lg font-medium hover:text-brand"
|
||||
>
|
||||
محصولات
|
||||
<IconChevron className="w-3.5 h-3.5 -rotate-90" />
|
||||
</Link>
|
||||
{mega && (
|
||||
<div className="absolute top-full right-0 w-[760px] rounded-2xl bg-white border border-black/5 shadow-xl p-5 grid grid-cols-4 gap-5">
|
||||
{parentCategories.map((cat) => (
|
||||
<div key={cat.slug}>
|
||||
<Link href={`/products/${cat.slug}`} className="block mb-3 text-sm font-bold text-brand">
|
||||
{cat.name}
|
||||
</Link>
|
||||
<ul className="space-y-1.5">
|
||||
{cat.children.slice(0, 8).map((child) => (
|
||||
<li key={child.slug}>
|
||||
<Link
|
||||
href={`/products/${child.slug}`}
|
||||
className="block text-[13px] text-zinc-600 hover:text-ink"
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{nav.map((item) => (
|
||||
<Link key={item.href} href={item.href} className="px-3 py-2 rounded-lg hover:text-brand">
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<SearchBox className="hidden md:block ms-4 max-w-sm flex-1 rounded-full bg-zinc-100 px-3" />
|
||||
|
||||
<div className="flex items-center gap-2 ms-auto">
|
||||
<a
|
||||
href={SITE.customerUrl}
|
||||
className="flex items-center gap-2 rounded-full px-3 py-2 text-sm hover:bg-zinc-100"
|
||||
>
|
||||
<IconUser />
|
||||
<span className="hidden sm:inline">ورود / ثبت نام</span>
|
||||
</a>
|
||||
<Link href="/cart" className="relative grid place-items-center w-10 h-10 rounded-full hover:bg-zinc-100">
|
||||
<IconCart className="w-6 h-6 text-brand" />
|
||||
<span className="absolute top-1 left-1 grid place-items-center w-4 h-4 rounded-full bg-brand text-[10px] text-white">
|
||||
{count.toLocaleString("fa-IR")}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
<button className="absolute inset-0 bg-black/40" aria-label="بستن" onClick={() => setOpen(false)} />
|
||||
<aside className="absolute inset-y-0 right-0 w-[86%] max-w-sm bg-white p-5 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Image src="/images/logo/logo.png" alt={SITE.nameFa} width={130} height={36} className="h-9 w-auto" />
|
||||
<button type="button" aria-label="بستن منو" onClick={() => setOpen(false)}>
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
<SearchBox className="mb-5 rounded-full bg-zinc-100 px-3" onNavigate={() => setOpen(false)} />
|
||||
<p className="text-xs text-zinc-400 mb-2">محصولات</p>
|
||||
<div className="space-y-4 mb-6">
|
||||
{parentCategories.map((cat) => (
|
||||
<div key={cat.slug}>
|
||||
<Link href={`/products/${cat.slug}`} className="font-bold text-brand" onClick={() => setOpen(false)}>
|
||||
{cat.name}
|
||||
</Link>
|
||||
<ul className="mt-2 grid grid-cols-2 gap-1">
|
||||
{cat.children.slice(0, 6).map((child) => (
|
||||
<li key={child.slug}>
|
||||
<Link href={`/products/${child.slug}`} className="text-sm text-zinc-600" onClick={() => setOpen(false)}>
|
||||
{child.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 border-t border-black/5 pt-4">
|
||||
{nav.map((item) => (
|
||||
<Link key={item.href} href={item.href} className="py-2" onClick={() => setOpen(false)}>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<a href={SITE.customerUrl} className="py-2">
|
||||
ورود / ثبت نام
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user