// Layout.jsx — Nav, Ticker, Footer const Icon = { Search: (p) => , User: (p) => , Cart: (p) => , Arrow: (p) => , Plus: (p) => , Check: (p) => , Download: (p) => , Inbox: (p) => , Star: (p) => , Play: (p) => , X: (p) => , Sparkle: (p) => , Bag: (p) => , Frame: (p) => , Menu: (p) => , Close: (p) => , }; window.Icon = Icon; const Logo = ({ size = 40 }) => (
DropPrint STORE
); window.Logo = Logo; const Ticker = ({ items }) => { const list = [...items, ...items, ...items, ...items]; return (
{list.map((it, i) => {it})}
); }; window.Ticker = Ticker; /* ─── Search Overlay ─────────────────────────────────────── */ const SearchOverlay = ({ onClose, navigate }) => { const [q, setQ] = React.useState(""); const inputRef = React.useRef(null); const posters = window.HM_DATA.posters; // Auto-focus al abrir React.useEffect(() => { setTimeout(() => inputRef.current?.focus(), 60); // Cerrar con Escape const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const results = q.trim().length === 0 ? [] : posters.filter(p => [p.title, p.artist, p.genre].some(f => f.toLowerCase().includes(q.toLowerCase()) ) ); const handleSelect = (p) => { navigate("product", p.id); onClose(); }; // Artistas sugeridos cuando no hay query const suggested = posters.slice(0, 6); return (
e.stopPropagation()}> {/* Input */}
setQ(e.target.value)} autoComplete="off" /> {q && ( )}
{/* Resultados */}
{q.trim() === "" ? ( <>
Populares
{["Bad Bunny", "Rosalía", "Karol G", "The Weeknd", "Quevedo", "Anuel AA"].map(a => ( ))}
Destacados
{suggested.map(p => ( ))}
) : results.length > 0 ? ( <>
{results.length} resultado{results.length !== 1 ? "s" : ""} para "{q}"
{results.map(p => ( ))}
) : (
🔍
Sin resultados para "{q}"
Prueba con otro artista o álbum
)}
{/* Footer hint */}
↵ seleccionar ESC cerrar
); }; window.SearchOverlay = SearchOverlay; const Nav = ({ route, navigate, lang, setLang, cartCount, t, onSearchOpen }) => { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Cerrar menú al cambiar de ruta React.useEffect(() => { setMenuOpen(false); }, [route]); // Bloquear scroll cuando el menú está abierto React.useEffect(() => { document.body.classList.toggle("no-scroll", menuOpen); return () => document.body.classList.remove("no-scroll"); }, [menuOpen]); const links = [ { id: "home", label: t.nav.home, route: "home" }, { id: "catalog", label: t.nav.catalog, route: "catalog" }, { id: "artists", label: t.nav.artists, route: "artists" }, { id: "how", label: t.nav.how, route: "home", hash: "#how" }, { id: "faq", label: t.nav.faq, route: "home", hash: "#faq" }, ]; const handleLink = (l) => { navigate(l.route); if (l.hash) setTimeout(() => document.querySelector(l.hash)?.scrollIntoView({ behavior: "smooth", block: "start" }), 80); setMenuOpen(false); }; return ( <>
▲ DEMO — PLANTILLA DE EJEMPLO — NO ES UNA TIENDA REAL ▲
{/* Mobile drawer overlay */}
setMenuOpen(false)} /> {/* Mobile drawer */}
); }; window.Nav = Nav; const Footer = ({ t }) => ( ); window.Footer = Footer;