49 lines
3.2 KiB
TypeScript
49 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Heart, Menu, ShoppingCart, UserRound } from "lucide-react";
|
|
import { PredictiveSearch } from "@/components/search/predictive-search";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Product } from "@/lib/headless/types";
|
|
import { useCartStore } from "@/store/cart-store";
|
|
|
|
const categories = [
|
|
{ label: "Juguetes para bebés", href: "/catalog?category=Figuras" },
|
|
{ label: "Educativos", href: "/catalog?category=Figuras" },
|
|
{ label: "Muñecas", href: "/catalog?category=Peluches" },
|
|
{ label: "Acción y aventura", href: "/catalog?collection=Marvel" },
|
|
{ label: "Mochilas", href: "/catalog?category=Mochilas" },
|
|
{ label: "Variedades", href: "/catalog" },
|
|
];
|
|
|
|
export function Navbar({ products }: { products: Product[] }) {
|
|
const items = useCartStore((state) => state.items);
|
|
const openCart = useCartStore((state) => state.openCart);
|
|
const count = items.reduce((sum, item) => sum + item.quantity, 0);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 shadow-md">
|
|
<div className="bg-yellow-300 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">Compra segura con ARI</span></div>
|
|
<div className="bg-cyan-400 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,.18)_0_12%,transparent_13%),radial-gradient(circle_at_80%_70%,rgba(255,255,255,.12)_0_10%,transparent_11%)]">
|
|
<div className="mx-auto grid max-w-7xl grid-cols-[72px_1fr_auto] items-center gap-4 px-4 py-4 lg:grid-cols-[100px_minmax(420px,1fr)_auto] lg:gap-8">
|
|
<Link href="/" className="relative size-16 overflow-hidden rounded-full border-4 border-white bg-black shadow-xl 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="hidden items-center gap-2 sm:flex">
|
|
<Button variant="ghost" size="icon" aria-label="Mi cuenta" className="bg-white/15 text-white hover:bg-white/25"><UserRound /></Button>
|
|
<Button variant="ghost" size="icon" aria-label="Favoritos" className="bg-white/15 text-white hover:bg-white/25"><Heart /></Button>
|
|
<Button variant="magenta" size="icon" onClick={openCart} aria-label={`Carrito con ${count} productos`} className="relative"><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>
|
|
<Button variant="magenta" size="icon" className="sm:hidden" onClick={openCart}><ShoppingCart /></Button>
|
|
</div>
|
|
</div>
|
|
<nav className="bg-cyan-700 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" className="shrink-0 text-white hover:bg-white/10 lg:mr-5"><Menu /></Button>
|
|
{categories.map((category) => <Link key={category.label} href={category.href} className="shrink-0 rounded-full px-4 py-2 text-sm font-extrabold hover:bg-white/10">{category.label}</Link>)}
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|