Initial commit: BRB Store Next.js storefront with Meshkee image slots.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ChevronDown, Menu, UserRound, X } from "lucide-react";
|
||||
import { Container } from "@/components/Container";
|
||||
import { Placeholder } from "@/components/Placeholder";
|
||||
import { HeaderSearch } from "@/components/layout/HeaderSearch";
|
||||
import { customerPortalUrl } from "@/lib/config";
|
||||
import { applianceGroups, categories, navLinks, site } from "@/lib/data";
|
||||
|
||||
export function Header() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [partsOpen, setPartsOpen] = useState(false);
|
||||
const [appliancesOpen, setAppliancesOpen] = useState(false);
|
||||
const [mobileParts, setMobileParts] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-line bg-white/95 backdrop-blur">
|
||||
<Container className="flex h-[84px] items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="grid size-10 place-items-center lg:hidden"
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label="منو"
|
||||
>
|
||||
<Menu className="size-5" />
|
||||
</button>
|
||||
|
||||
<Link href="/" className="flex h-14 shrink-0 items-center">
|
||||
<Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
|
||||
</Link>
|
||||
|
||||
<nav className="mx-2 hidden items-center lg:flex">
|
||||
<Link href="/" className="px-3 py-2 text-[14px] hover:text-brand">
|
||||
خانه
|
||||
</Link>
|
||||
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setAppliancesOpen(true)}
|
||||
onMouseLeave={() => setAppliancesOpen(false)}
|
||||
>
|
||||
<button type="button" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
|
||||
لوازم برقی
|
||||
<ChevronDown className="size-3.5" />
|
||||
</button>
|
||||
{appliancesOpen ? (
|
||||
<div className="absolute right-0 top-full w-[560px] border border-line bg-white p-6 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
{applianceGroups.map((group) => (
|
||||
<div key={group.title}>
|
||||
<p className="mb-3 border-r-2 border-brand pr-2 text-[13px] font-bold">{group.title}</p>
|
||||
<ul className="space-y-1.5 text-[13px] text-muted">
|
||||
{group.items.map((item) => (
|
||||
<li key={item}>
|
||||
<Link href="/#parts" className="hover:text-brand">
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setPartsOpen(true)}
|
||||
onMouseLeave={() => setPartsOpen(false)}
|
||||
>
|
||||
<Link href="/#parts" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
|
||||
قطعات
|
||||
<ChevronDown className="size-3.5" />
|
||||
</Link>
|
||||
{partsOpen ? (
|
||||
<div className="absolute right-0 top-full w-[720px] border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{categories.map((category) => (
|
||||
<Link key={category.id} href="/#parts" className="group flex items-center gap-2 p-1.5 hover:bg-paper">
|
||||
<Placeholder
|
||||
src={category.image}
|
||||
alt=""
|
||||
className="size-11 shrink-0 object-cover"
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-[12px] font-medium leading-5 group-hover:text-brand">
|
||||
{category.title.replace("قطعات ", "")}
|
||||
</span>
|
||||
<span className="font-latin block text-[9px] tracking-[0.16em] text-muted uppercase">
|
||||
{category.english}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{navLinks
|
||||
.filter((link) => link.href !== "/" && link.href !== "/#parts")
|
||||
.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="px-3 py-2 text-[14px] hover:text-brand"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<HeaderSearch className="ms-auto hidden max-w-xs flex-1 md:block" />
|
||||
|
||||
<a
|
||||
href={customerPortalUrl}
|
||||
className="flex items-center gap-2 px-2 py-2 text-[13px] hover:text-brand"
|
||||
aria-label="ورود به حساب کاربری"
|
||||
>
|
||||
<UserRound className="size-5" />
|
||||
<span className="hidden xl:inline">ورود / ثبتنام</span>
|
||||
</a>
|
||||
</Container>
|
||||
|
||||
{open ? (
|
||||
<div className="fixed inset-0 z-50 bg-ink/50 lg:hidden" onClick={() => setOpen(false)}>
|
||||
<div
|
||||
className="absolute inset-y-0 right-0 flex w-[min(100%,340px)] flex-col bg-white"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="flex h-[84px] items-center justify-between border-b border-line px-4">
|
||||
<Placeholder src={site.logo} alt={site.name} className="h-12 w-auto object-contain" />
|
||||
<button type="button" onClick={() => setOpen(false)} aria-label="بستن">
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col gap-1 overflow-y-auto p-4 text-[15px]">
|
||||
<HeaderSearch className="mb-3" />
|
||||
{navLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href} className="py-2" onClick={() => setOpen(false)}>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-between py-2"
|
||||
onClick={() => setMobileParts((value) => !value)}
|
||||
>
|
||||
دستهبندی قطعات
|
||||
<ChevronDown className={`size-4 transition ${mobileParts ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
{mobileParts
|
||||
? categories.map((category) => (
|
||||
<Link
|
||||
key={category.id}
|
||||
href="/#parts"
|
||||
className="py-1.5 pe-2 text-[13px] text-muted"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{category.title}
|
||||
</Link>
|
||||
))
|
||||
: null}
|
||||
<a href={customerPortalUrl} className="mt-4 rounded-xl bg-brand px-4 py-3 text-center text-white">
|
||||
ورود / ثبتنام
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user