267 lines
12 KiB
TypeScript
267 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname, useSearchParams } from "next/navigation";
|
|
import { Heart, Menu, MessageCircle, PackageCheck, ShoppingCart, UserRound } from "lucide-react";
|
|
import { Suspense, useState } from "react";
|
|
import { PredictiveSearch } from "@/components/search/predictive-search";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
|
import type { Product } from "@/lib/headless/types";
|
|
import { useCartStore } from "@/store/cart-store";
|
|
import { useWishlistStore } from "@/store/wishlist-store";
|
|
|
|
type CategoryLink = {
|
|
label: string;
|
|
href: string;
|
|
category?: string;
|
|
collection?: string;
|
|
section?: string;
|
|
root?: boolean;
|
|
};
|
|
|
|
const categories: CategoryLink[] = [
|
|
{ label: "Juguetes para bebés", href: "/catalog?category=Figuras", category: "Figuras" },
|
|
{
|
|
label: "Educativos",
|
|
href: "/catalog?category=Figuras§ion=educativos",
|
|
category: "Figuras",
|
|
section: "educativos",
|
|
},
|
|
{ label: "Muñecas y peluches", href: "/catalog?category=Peluches", category: "Peluches" },
|
|
{ label: "Acción y aventura", href: "/catalog?collection=Marvel", collection: "Marvel" },
|
|
{ label: "Mochilas", href: "/catalog?category=Mochilas", category: "Mochilas" },
|
|
{ label: "Variedades", href: "/catalog", root: true },
|
|
];
|
|
|
|
const collections = ["Toy Story", "Marvel", "Intensamente", "Lilo & Stitch", "Frozen"];
|
|
|
|
export function Navbar({ products }: { products: Product[] }) {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const [accountOpen, setAccountOpen] = useState(false);
|
|
const items = useCartStore((state) => state.items);
|
|
const cartHydrated = useCartStore((state) => state.hasHydrated);
|
|
const openCart = useCartStore((state) => state.openCart);
|
|
const wishlistProducts = useWishlistStore((state) => state.products);
|
|
const wishlistHydrated = useWishlistStore((state) => state.hasHydrated);
|
|
const openWishlist = useWishlistStore((state) => state.openWishlist);
|
|
const count = cartHydrated ? items.reduce((sum, item) => sum + item.quantity, 0) : 0;
|
|
const wishlistCount = wishlistHydrated ? wishlistProducts.length : 0;
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/95 shadow-sm backdrop-blur-xl">
|
|
<div className="bg-gradient-to-r from-amber-300 via-yellow-200 to-lime-200 px-4 py-2 text-center text-xs font-black text-slate-950 sm:text-sm">
|
|
Paga tus compras a cuotas · Envíos nacionales · <span className="underline decoration-2 underline-offset-2">Compra segura con ARI</span>
|
|
</div>
|
|
|
|
<div className="relative overflow-visible bg-white">
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-cyan-400 via-violet-500 to-fuchsia-500" />
|
|
<div className="mx-auto grid max-w-7xl grid-cols-[72px_1fr_auto] items-center gap-4 px-4 py-4 lg:grid-cols-[92px_minmax(420px,1fr)_auto] lg:gap-8">
|
|
<Link href="/" className="relative size-16 overflow-hidden rounded-full border-2 border-slate-900 bg-black shadow-lg lg:size-20">
|
|
<Image src="/images/brand/logo-ari.png" alt="ARI Shopping" fill priority sizes="80px" className="object-cover" />
|
|
</Link>
|
|
<PredictiveSearch products={products} />
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="icon" aria-label="Mi cuenta" className="hidden border-slate-300 bg-white text-slate-900 hover:border-violet-400 hover:bg-violet-50 sm:inline-flex" onClick={() => setAccountOpen(true)}><UserRound /></Button>
|
|
<Button variant="outline" size="icon" aria-label={`Favoritos: ${wishlistCount}`} className="relative hidden border-slate-300 bg-white text-slate-900 hover:border-fuchsia-400 hover:bg-fuchsia-50 sm:inline-flex" onClick={openWishlist}>
|
|
<Heart />
|
|
{wishlistCount > 0 && <span className="absolute -right-1.5 -top-1.5 grid size-5 place-items-center rounded-full bg-violet-600 text-[10px] font-black text-white">{wishlistCount}</span>}
|
|
</Button>
|
|
<Button variant="magenta" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative shadow-lg shadow-fuchsia-500/20">
|
|
<ShoppingCart />
|
|
<span className="absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-yellow-300 text-[11px] font-black text-slate-950">{count}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Suspense fallback={<DesktopCategoryNavigationFallback onOpenMenu={() => setMenuOpen(true)} />}>
|
|
<DesktopCategoryNavigation onOpenMenu={() => setMenuOpen(true)} />
|
|
</Suspense>
|
|
|
|
<Sheet open={menuOpen} onOpenChange={setMenuOpen}>
|
|
<SheetContent side="left" className="max-w-sm">
|
|
<SheetHeader>
|
|
<SheetTitle>Explora ARI</SheetTitle>
|
|
<SheetDescription>Categorías y colecciones del catálogo.</SheetDescription>
|
|
</SheetHeader>
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|
<p className="mb-3 text-xs font-black uppercase tracking-[.16em] text-fuchsia-600">Categorías</p>
|
|
<div className="grid gap-2">
|
|
<Suspense fallback={<MobileCategoryLinksFallback onNavigate={() => setMenuOpen(false)} />}>
|
|
<MobileCategoryLinks onNavigate={() => setMenuOpen(false)} />
|
|
</Suspense>
|
|
</div>
|
|
<p className="mb-3 mt-8 text-xs font-black uppercase tracking-[.16em] text-violet-600">Colecciones</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{collections.map((collection) => <Link key={collection} href={`/catalog?collection=${encodeURIComponent(collection)}`} onClick={() => setMenuOpen(false)} className="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold hover:bg-violet-100 hover:text-violet-700">{collection}</Link>)}
|
|
</div>
|
|
<div className="mt-8 grid grid-cols-2 gap-3 sm:hidden">
|
|
<Button variant="outline" onClick={() => { setMenuOpen(false); setAccountOpen(true); }}><UserRound className="size-4" />Cuenta</Button>
|
|
<Button variant="outline" onClick={() => { setMenuOpen(false); openWishlist(); }}><Heart className="size-4" />Favoritos</Button>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
<Dialog open={accountOpen} onOpenChange={setAccountOpen}>
|
|
<DialogContent className="max-w-lg p-7">
|
|
<div className="pr-10">
|
|
<span className="text-xs font-black uppercase tracking-[.16em] text-violet-600">Atención personalizada</span>
|
|
<h2 className="mt-3 text-3xl font-black">Tu cuenta ARI</h2>
|
|
<p className="mt-3 text-sm leading-6 text-slate-600">El inicio de sesión quedará conectado al backend headless. Mientras tanto, puedes gestionar pedidos y disponibilidad directamente por WhatsApp.</p>
|
|
<div className="mt-6 grid gap-3">
|
|
<Button asChild variant="magenta" size="lg"><a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer"><MessageCircle />Hablar con ARI</a></Button>
|
|
<Button asChild variant="outline"><Link href="/catalog" onClick={() => setAccountOpen(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function useCategoryNavigationState() {
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const currentCategory = searchParams.get("category") ?? "";
|
|
const currentCollection = searchParams.get("collection") ?? "";
|
|
const currentSection = searchParams.get("section") ?? "";
|
|
const isCatalog = pathname === "/catalog";
|
|
|
|
const isCategoryActive = (item: CategoryLink) => {
|
|
if (!isCatalog) return false;
|
|
|
|
if (item.root) {
|
|
return !currentCategory && !currentCollection && !currentSection;
|
|
}
|
|
|
|
return (
|
|
(item.category ?? "") === currentCategory &&
|
|
(item.collection ?? "") === currentCollection &&
|
|
(item.section ?? "") === currentSection
|
|
);
|
|
};
|
|
|
|
return { isCategoryActive };
|
|
}
|
|
|
|
function DesktopCategoryNavigation({ onOpenMenu }: { onOpenMenu: () => void }) {
|
|
const { isCategoryActive } = useCategoryNavigationState();
|
|
|
|
return (
|
|
<nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
|
|
<div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onOpenMenu}
|
|
aria-label="Abrir menú principal"
|
|
className="mr-3 shrink-0 text-white hover:bg-white/10"
|
|
>
|
|
<Menu />
|
|
</Button>
|
|
|
|
{categories.map((category) => {
|
|
const active = isCategoryActive(category);
|
|
|
|
return (
|
|
<Link
|
|
key={category.label}
|
|
href={category.href}
|
|
prefetch={false}
|
|
aria-current={active ? "page" : undefined}
|
|
className={`shrink-0 rounded-full px-4 py-2 text-sm font-extrabold transition ${
|
|
active
|
|
? "bg-gradient-to-r from-cyan-500 to-violet-500 text-white shadow-lg shadow-violet-950/30"
|
|
: "text-white/90 hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
|
|
}`}
|
|
>
|
|
{category.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function DesktopCategoryNavigationFallback({ onOpenMenu }: { onOpenMenu: () => void }) {
|
|
return (
|
|
<nav className="border-b-4 border-fuchsia-500 bg-slate-950 text-white">
|
|
<div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none]">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onOpenMenu}
|
|
aria-label="Abrir menú principal"
|
|
className="mr-3 shrink-0 text-white hover:bg-white/10"
|
|
>
|
|
<Menu />
|
|
</Button>
|
|
|
|
{categories.map((category) => (
|
|
<Link
|
|
key={category.label}
|
|
href={category.href}
|
|
prefetch={false}
|
|
className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold text-white/90 transition hover:bg-gradient-to-r hover:from-cyan-500 hover:to-violet-500 hover:text-white"
|
|
>
|
|
{category.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function MobileCategoryLinks({ onNavigate }: { onNavigate: () => void }) {
|
|
const { isCategoryActive } = useCategoryNavigationState();
|
|
|
|
return (
|
|
<>
|
|
{categories.map((category) => {
|
|
const active = isCategoryActive(category);
|
|
|
|
return (
|
|
<Link
|
|
key={category.label}
|
|
href={category.href}
|
|
prefetch={false}
|
|
aria-current={active ? "page" : undefined}
|
|
onClick={onNavigate}
|
|
className={`rounded-2xl border px-4 py-3 font-extrabold transition ${
|
|
active
|
|
? "border-violet-500 bg-violet-50 text-violet-700"
|
|
: "border-slate-200 hover:border-cyan-400 hover:bg-cyan-50"
|
|
}`}
|
|
>
|
|
{category.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function MobileCategoryLinksFallback({ onNavigate }: { onNavigate: () => void }) {
|
|
return (
|
|
<>
|
|
{categories.map((category) => (
|
|
<Link
|
|
key={category.label}
|
|
href={category.href}
|
|
prefetch={false}
|
|
onClick={onNavigate}
|
|
className="rounded-2xl border border-slate-200 px-4 py-3 font-extrabold transition hover:border-cyan-400 hover:bg-cyan-50"
|
|
>
|
|
{category.label}
|
|
</Link>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|