Object.assign(e.target.style, { left: 12, top: 12, background: "var(--fg)", color: "var(--bg)", padding: "8px 12px", borderRadius: 6, zIndex: 1000 })}
onBlur={(e) => Object.assign(e.target.style, { left: -9999 })}>
{t("skip")}
{/* Drawer */}
{drawerOpen && (
setDrawerOpen(false)}
style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.15)" }} />
)}
);
}
function DrawerLink({ label, active, onClick }) {
return (
);
}
/* Bottom nav — user hard constraint: Home / Events / Crafts on mobile <768 */
function BottomNav({ page, navigate, lang }) {
const t = useT(lang, STRINGS);
const items = [
{ key: "home", label: t("nav_home"), icon: HomeIcon },
{ key: "events", label: t("nav_events"), icon: CalendarIcon },
{ key: "crafts", label: t("nav_crafts"), icon: CraftIcon },
];
const isActive = (k) => page === k || (k === "events" && page === "event");
return (
);
}
/* Footer (events-only browse per copy-deck-p0) */
function Footer({ lang, navigate }) {
const t = useT(lang, STRINGS);
return (
);
}
function FooterCol({ heading, children }) {
return (
{heading}
{React.Children.map(children, (c) => - {c}
)}
);
}
function FooterLink({ onClick, children }) {
return (
);
}
/* ============================================================
Icons (hairline, minimal)
============================================================ */
function HomeIcon() {
return
;
}
function CalendarIcon() {
return
;
}
function CraftIcon() {
return
;
}
function CheckIcon() {
return
;
}
function MapPinIcon() {
return
;
}
function ShareIcon() {
return
;
}
function ArrowRight() {
return
;
}
/* ============================================================
Verified / Source / HonestGap
============================================================ */
function VerifiedIndicator({ institution, lang }) {
return (
Verified
{STRINGS.verified_by[lang].replace("{institution}", institution)}
);
}
function SourceAttribution({ source, date, lang }) {
const t = useT(lang, STRINGS);
return (
{t("source_line", { source, date })}
);
}
function HonestGap({ children }) { return
{children}; }
/* ============================================================
Editorial placeholder image — drawing motifs in CSS
============================================================ */
function PlaceholderImage({ event, label }) {
if (event.image?.src) {
return (
);
}
// Always render the Thai-script glyph on a tinted/striped block.
// The diagonal hairline pattern is the consistent "editorial placeholder" texture.
return (
{event.glyph}
EDITORIAL · BAANSTORY
);
}
/* ============================================================
Event card preview
============================================================ */
function EventCardPreview({ event, lang, onOpen, compact = false }) {
const t = useT(lang, STRINGS);
const isVerified = !!event.verified;
return (
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), onOpen())}
tabIndex={0}
role="link"
aria-label={event.name[lang]}
style={{ cursor: "pointer", padding: compact ? 18 : 20 }}
>
{isVerified && (
Verified
)}
{event.dateText[lang]}
·
{event.province}
{event.name[lang]}
{lang !== "th" && (
{event.thai_name}
)}
{event.value[lang]}
{isVerified ? (
{event.verified.institution}
) : (
{STRINGS.source_line[lang].replace("{source}", event.source[lang]).replace("{date}", event.sourceChecked[lang])}
)}
);
}
Object.assign(window, {
Toast, Header, BottomNav, Footer,
VerifiedIndicator, SourceAttribution, HonestGap,
PlaceholderImage, EventCardPreview,
CheckIcon, MapPinIcon, ShareIcon, ArrowRight,
});