// Shared UI: icons, Nav, Footer, MailingList, Modal, Toast
const { useState, useEffect, useRef } = React;
// ---- Icons (inline SVG, stroke-based) ----------------------------
const Icon = {
Needle: ({ size = 20 }) =>
,
Scissors: ({ size = 20 }) =>
,
Heart: ({ size = 20 }) =>
,
Bag: ({ size = 20 }) =>
,
Mail: ({ size = 18 }) =>
,
Phone: ({ size = 18 }) =>
,
Pin: ({ size = 18 }) =>
,
Clock: ({ size = 18 }) =>
,
Close: ({ size = 18 }) =>
,
Plus: ({ size = 16 }) =>
,
Trash: ({ size = 16 }) =>
,
Edit: ({ size = 16 }) =>
,
Arrow: ({ size = 16 }) =>
};
// ---- Logo ---------------------------------------------------------
function Brand({ onClick }) {
return (
{e.preventDefault();onClick && onClick();}}>
Holibags
);
}
// ---- Nav ----------------------------------------------------------
const NAV_ITEMS = [
{ id: "home", label: "Home" },
{ id: "products", label: "Products" },
{ id: "contact", label: "Contact" }];
function Nav({ page, navigate, cartCount }) {
const [open, setOpen] = useState(false);
useEffect(() => {setOpen(false);}, [page]);
return (
);
}
// ---- Mailing list -------------------------------------------------
function MailingList({ variant = "light" }) {
const [email, setEmail] = useState("");
const [err, setErr] = useState("");
const [done, setDone] = useState(false);
function submit(e) {
e.preventDefault();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
setErr("Please enter a valid email address.");
return;
}
setErr("");
fetch("/mailing_list", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, source: variant === "dark" ? "footer" : "page" }),
}).then((r) => r.ok ? r.json() : Promise.reject(r))
.catch((e) => console.error("[mailing list]", e));
setDone(true);
setEmail("");
setTimeout(() => setDone(false), 4000);
}
return (
);
}
// ---- Footer -------------------------------------------------------
function Footer({ navigate, hours }) {
const list = Array.isArray(hours) && hours.length ? hours : DEFAULT_HOURS;
return (
);
}
// ---- Toast --------------------------------------------------------
function Toast({ message, onDone }) {
useEffect(() => {
const t = setTimeout(() => onDone(), 2400);
return () => clearTimeout(t);
}, [message]);
if (!message) return null;
return {message}
;
}
// ---- Modal --------------------------------------------------------
function Modal({ open, onClose, children }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => {if (e.key === "Escape") onClose();};
window.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = "";
};
}, [open]);
if (!open) return null;
return (
e.stopPropagation()} style={{ position: "relative" }}>
{children}
);
}
// ---- Page header --------------------------------------------------
function PageHeader({ eyebrow, title, sub }) {
return (
{eyebrow &&
{eyebrow}
}
{title}
{sub &&
{sub}
}
{"★".repeat(n)}{"☆".repeat(5 - n)}
);
}
Object.assign(window, { Icon, Brand, Nav, MailingList, Footer, Toast, Modal, PageHeader, Stars, DEFAULT_HOURS });