// Shared UI components and helpers for Hazelbelle site.
const { useState, useEffect, useRef, useCallback, useMemo, createContext, useContext } = React;
// ---------- Helpers ----------
function uid() {
return Math.random().toString(36).slice(2, 8).toUpperCase();
}
function makeOrderRef() {
// HB-YYMMDD-XXXX
const d = new Date();
const yy = String(d.getFullYear()).slice(2);
const mm = String(d.getMonth() + 1).padStart(2, "0");
const dd = String(d.getDate()).padStart(2, "0");
return `HB-${yy}${mm}${dd}-${uid().slice(0, 4)}`;
}
function fmtDate(ts) {
const d = new Date(ts);
return d.toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
}
function fmtTime(ts) {
return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}
function fmtPrice(p) {
if (p == null || p === "") return "—";
const n = Number(p);
if (Number.isNaN(n)) return p;
return `$${n.toFixed(2)}`;
}
function classNames(...xs) { return xs.filter(Boolean).join(" "); }
// [HB] Hidden spam-trap field for public forms. Real people never see or fill it
// — it's positioned off-screen, skipped by keyboard tabbing and labelled for the
// rare screen-reader that reaches it. Spam bots auto-fill every field they find,
// so the server (lib/form-honeypot.js) drops any submission where this comes back
// non-empty. The field name "website" must match HONEYPOT_FIELD on the server.
function Honeypot({ value, onChange }) {
return (
Leave this field empty
);
}
// ---------- App Context ----------
const AppCtx = createContext(null);
const useApp = () => useContext(AppCtx);
// ---------- Persistent state ----------
function useLocalState(key, initial) {
const [val, setVal] = useState(() => {
try {
const raw = localStorage.getItem(key);
if (raw == null) return typeof initial === "function" ? initial() : initial;
return JSON.parse(raw);
} catch (e) {
return typeof initial === "function" ? initial() : initial;
}
});
useEffect(() => {
try { localStorage.setItem(key, JSON.stringify(val)); } catch (e) {}
}, [key, val]);
return [val, setVal];
}
// ---------- Brand mark / nav ----------
function BrandMark({ size = 44 }) {
return (
Hazelbelle
Embroidery & Print
);
}
function NavBar({ route, go }) {
const app = useApp();
const [open, setOpen] = useState(false);
const path = (route || "").split("?")[0];
const customer = app && app.customer;
const cartCount = (app && app.cart ? app.cart : []).reduce((n, x) => n + (x.qty || 0), 0); // [HB-ADD]
const links = [
{ to: "/", label: "Home" },
{ to: "/shop", label: "Shop & Examples" },
{ to: "/blanks", label: "Shop blanks" },
{ to: "/quote", label: "Get a quote" },
{ to: "/blog", label: "Journal" },
{ to: "/upload", label: "Upload a design" },
{ to: "/about", label: "About" },
{ to: "/contact", label: "Contact" },
];
const close = () => setOpen(false);
useEffect(() => { setOpen(false); }, [route]);
return (
{links.map(l => (
{l.label}
))}
{customer ? "My account" : "Sign in"}
{/* Labeled theme toggle for the mobile dropdown — the icon button in
the bar is easy to miss on a phone. Hidden on desktop via CSS. */}
{ if (app && app.toggleTheme) app.toggleTheme(); close(); }}
>{app && app.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
);
}
// ---------- Thread divider (wavy embroidery line) ----------
function ThreadDivider({ color }) {
return (
);
}
// ---------- Footer ----------
function Footer() {
const app = useApp();
return (
);
}
// ---------- Toast ----------
function Toast({ msg, onDone }) {
useEffect(() => {
if (!msg) return;
const t = setTimeout(onDone, 3200);
return () => clearTimeout(t);
}, [msg, onDone]);
if (!msg) return null;
return {msg}
;
}
// ---------- File chip ----------
function FileChip({ file, onRemove }) {
const isImg = file.dataUrl && file.dataUrl.startsWith("data:image");
return (
{isImg
?
:
{(file.name || "").split(".").pop().toUpperCase()}
}
{file.name}
{Math.round((file.size || 0) / 1024)} KB
{onRemove &&
× }
);
}
// ---------- Modal ----------
function Modal({ open, onClose, children }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()}>
×
{children}
);
}
// ---------- Placeholder image ----------
function Placeholder({ label, variant }) {
return {label}
;
}
// Read file as data URL
function readFileAsDataURL(file) {
return new Promise((resolve, reject) => {
const r = new FileReader();
r.onload = () => resolve(r.result);
r.onerror = reject;
r.readAsDataURL(file);
});
}
// Make a small JPEG data-URL thumbnail from an image file (for inline previews
// in the admin, stored alongside the upload). Resolves "" if not an image or on
// any failure. SVGs are skipped (canvas export can fail/taint).
function makeThumbnail(file, maxDim = 480) {
return new Promise((resolve) => {
if (!file || !file.type || !file.type.startsWith("image/") || file.type === "image/svg+xml") {
return resolve("");
}
const url = URL.createObjectURL(file);
const img = new Image();
img.onload = () => {
try {
const scale = Math.min(1, maxDim / Math.max(img.width, img.height));
const w = Math.max(1, Math.round(img.width * scale));
const h = Math.max(1, Math.round(img.height * scale));
const canvas = document.createElement("canvas");
canvas.width = w; canvas.height = h;
canvas.getContext("2d").drawImage(img, 0, 0, w, h);
resolve(canvas.toDataURL("image/jpeg", 0.72));
} catch (e) { resolve(""); }
finally { URL.revokeObjectURL(url); }
};
img.onerror = () => { URL.revokeObjectURL(url); resolve(""); };
img.src = url;
});
}
Object.assign(window, {
useState, useEffect, useRef, useCallback, useMemo, createContext, useContext,
AppCtx, useApp,
uid, makeOrderRef, fmtDate, fmtTime, fmtPrice, classNames,
useLocalState,
BrandMark, NavBar, ThreadDivider, Footer, Toast, FileChip, Modal, Placeholder,
readFileAsDataURL, makeThumbnail,
});
Hazelbelle
Embroidery & Print