checkpoint before checking out main
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { categories } from "@/data/sample";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "فروش ویژه", href: "#" },
|
||||
{ label: "درباره ما", href: "#" },
|
||||
{ label: "سوالات متداول", href: "#" },
|
||||
{ label: "تماس با ما", href: "#" },
|
||||
];
|
||||
|
||||
const megaColumns = [
|
||||
{
|
||||
title: "سرمایش و گرمایش",
|
||||
en: "Cooling & Heating",
|
||||
items: ["یخچال و فریزر", "کولر گازی", "آبگرمکن", "بخاری"],
|
||||
},
|
||||
{
|
||||
title: "شستشو",
|
||||
en: "Laundry & Care",
|
||||
items: ["ماشین لباسشویی", "ماشین ظرفشویی", "خشک‌کن", "اتو بخار"],
|
||||
},
|
||||
{
|
||||
title: "صوتی و تصویری",
|
||||
en: "AV & Display",
|
||||
items: ["تلویزیون", "ساندبار", "سینمای خانگی", "پروژکتور"],
|
||||
},
|
||||
{
|
||||
title: "آشپزخانه",
|
||||
en: "Kitchen",
|
||||
items: ["مایکروویو", "جاروبرقی", "هود", "اجاق گاز"],
|
||||
},
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const onClickOutside = (event: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
setMenuOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", onClickOutside);
|
||||
return () => document.removeEventListener("mousedown", onClickOutside);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-border bg-surface/95 backdrop-blur-sm">
|
||||
<div className="mx-auto max-w-7xl px-4">
|
||||
<div className="flex items-center justify-between gap-4 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red text-lg font-bold text-white">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-display text-xl font-bold tracking-tight">
|
||||
<span className="text-red">SANI</span>
|
||||
<span className="text-foreground">HOME</span>
|
||||
</p>
|
||||
<p className="text-xs text-muted">فروشگاه لوازم خانگی</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden flex-1 px-6 md:block">
|
||||
<div className="flex overflow-hidden rounded-xl border border-border bg-background">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="جستجوی محصول، برند یا دسته‌بندی..."
|
||||
className="flex-1 bg-transparent px-4 py-2.5 text-sm outline-none placeholder:text-muted"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-red px-5 text-sm font-medium text-white transition-colors hover:bg-red-dark"
|
||||
>
|
||||
جستجو
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
className="hidden items-center gap-1.5 text-muted transition-colors hover:text-red sm:flex"
|
||||
>
|
||||
<span>👤</span>
|
||||
<span>ورود</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="relative flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 transition-colors hover:border-red hover:text-red"
|
||||
>
|
||||
<span>🛒</span>
|
||||
<span className="hidden sm:inline">سبد خرید</span>
|
||||
<span className="absolute -top-1.5 -left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-red text-[10px] font-bold text-white">
|
||||
۲
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="relative flex items-center gap-6 overflow-visible border-t border-border py-3 text-sm">
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="relative"
|
||||
onMouseEnter={() => setMenuOpen(true)}
|
||||
onMouseLeave={() => setMenuOpen(false)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMenuOpen((open) => !open)}
|
||||
aria-expanded={menuOpen}
|
||||
aria-haspopup="true"
|
||||
className="flex shrink-0 items-center gap-2 rounded-lg bg-red px-4 py-2 font-medium text-white transition-colors hover:bg-red-dark"
|
||||
>
|
||||
<span aria-hidden>☰</span>
|
||||
دسته‌بندی‌ها
|
||||
</button>
|
||||
|
||||
{menuOpen && (
|
||||
<div className="absolute top-full right-0 z-50 mt-0 w-[min(92vw,760px)] animate-fade-up rounded-b-2xl border border-t-0 border-border bg-surface p-5 shadow-xl">
|
||||
<div className="mb-4 flex items-end justify-between gap-3 border-b border-border pb-3">
|
||||
<div>
|
||||
<p className="font-bold text-red-dark">همه دسته‌بندی‌ها</p>
|
||||
<p className="font-display text-[11px] tracking-wide text-muted uppercase">
|
||||
Shop by Category
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" className="text-xs font-medium text-red hover:text-red-dark">
|
||||
مشاهده همه ←
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{megaColumns.map((column) => (
|
||||
<div key={column.title}>
|
||||
<p className="mb-0.5 text-sm font-bold text-red-dark">{column.title}</p>
|
||||
<p className="font-display mb-3 text-[10px] tracking-wider text-muted uppercase">
|
||||
{column.en}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{column.items.map((item) => (
|
||||
<li key={item}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-muted transition-colors hover:text-red"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-2 gap-2 border-t border-border pt-4 sm:grid-cols-4">
|
||||
{categories.slice(0, 4).map((cat) => (
|
||||
<a
|
||||
key={cat.id}
|
||||
href="#"
|
||||
className="rounded-lg bg-red-light/50 px-3 py-2 text-center text-xs font-medium text-red-dark transition-colors hover:bg-red-light"
|
||||
>
|
||||
{cat.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="shrink-0 text-muted transition-colors hover:text-red"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user