Add Arjmand Pharmacy Next.js homepage.
Initial RTL storefront with header, slider, product sections, and local image assets. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ChevronDown,
|
||||
Heart,
|
||||
Menu,
|
||||
Search,
|
||||
ShoppingBag,
|
||||
UserRound,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Container } from "@/components/Container";
|
||||
import { Placeholder } from "@/components/Placeholder";
|
||||
import { MegaMenu } from "@/components/layout/MegaMenu";
|
||||
import { categories, navLinks, site } from "@/lib/data";
|
||||
|
||||
export function Header({ logoSrc }: { logoSrc: string }) {
|
||||
const [megaOpen, setMegaOpen] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [mobileCats, setMobileCats] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-line bg-white">
|
||||
<Container className="flex h-[72px] items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="grid size-10 place-items-center rounded-xl text-navy lg:hidden"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
aria-label="منو"
|
||||
>
|
||||
<Menu className="size-5" />
|
||||
</button>
|
||||
|
||||
<Link href="/" className="flex h-11 shrink-0 items-center">
|
||||
<Placeholder src={logoSrc} alt={site.name} className="h-11 w-auto object-contain" />
|
||||
</Link>
|
||||
|
||||
<form className="relative hidden min-w-0 flex-1 md:block">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="جستجوی دارو، مکمل و محصولات بهداشتی..."
|
||||
className="h-11 w-full rounded-xl border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
|
||||
/>
|
||||
<Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />
|
||||
</form>
|
||||
|
||||
<div className="ms-auto flex items-center gap-1">
|
||||
<Link
|
||||
href="#"
|
||||
className="hidden items-center gap-2 rounded-xl px-3 py-2 text-[13px] text-ink hover:bg-mist lg:flex"
|
||||
>
|
||||
<UserRound className="size-5 text-navy" />
|
||||
ورود / ثبتنام
|
||||
</Link>
|
||||
<Link href="#" className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقهمندی">
|
||||
<Heart className="size-5 text-navy" />
|
||||
</Link>
|
||||
<Link href="#" className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
|
||||
<ShoppingBag className="size-5 text-navy" />
|
||||
<span className="absolute top-1.5 left-1.5 grid size-4 place-items-center rounded-full bg-primary text-[10px] text-white">
|
||||
۰
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<div className="hidden border-t border-line lg:block">
|
||||
<Container className="flex h-12 items-center gap-1">
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setMegaOpen(true)}
|
||||
onMouseLeave={() => setMegaOpen(false)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-9 items-center gap-2 rounded-lg bg-navy px-3.5 text-[13px] font-medium text-white"
|
||||
>
|
||||
<Menu className="size-4" />
|
||||
دستهبندیها
|
||||
<ChevronDown className={`size-4 transition ${megaOpen ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
<MegaMenu open={megaOpen} />
|
||||
</div>
|
||||
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="rounded-lg px-3 py-2 text-[13px] text-ink transition hover:bg-sky hover:text-primary"
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
))}
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{mobileOpen && (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-0 bg-navy/40"
|
||||
aria-label="بستن"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
<aside className="absolute inset-y-0 right-0 flex w-[86%] max-w-sm flex-col bg-white">
|
||||
<div className="flex items-center justify-between border-b border-line px-4 py-3">
|
||||
<Placeholder src={logoSrc} alt={site.name} className="h-9 w-auto object-contain" />
|
||||
<button type="button" onClick={() => setMobileOpen(false)} aria-label="بستن">
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
<form className="px-4 pt-4">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="جستجو..."
|
||||
className="h-11 w-full rounded-xl border border-line bg-mist px-3 text-[13px] outline-none"
|
||||
/>
|
||||
</form>
|
||||
<nav className="flex-1 overflow-y-auto px-2 py-3">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-right text-[14px] font-medium text-navy"
|
||||
onClick={() => setMobileCats((v) => !v)}
|
||||
>
|
||||
دستهبندیها
|
||||
<ChevronDown className={`size-4 ${mobileCats ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
{mobileCats && (
|
||||
<ul className="mb-2 space-y-1 pr-3">
|
||||
{categories.map((cat) => (
|
||||
<li key={cat.id}>
|
||||
<Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] text-muted">
|
||||
{cat.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="block rounded-xl px-3 py-2.5 text-[14px]"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user