// Calc-U 59 — Reusable components for the help site (React 18 + Babel) const { useState, useEffect, useRef, useMemo } = React; /* ============================================================= Header / nav ============================================================= */ function SiteHeader({ page, onNav }) { const items = [ { id: "home", label: "Overview" }, { id: "start", label: "Getting Started" }, { id: "ref", label: "App Reference" }, { id: "modules", label: "Modules" }, { id: "faq", label: "FAQ" }, ]; return (
onNav("home")}> Calc-U 59 app icon
Calc-U 59 User Guide
App Store
); } /* ============================================================= Footer ============================================================= */ function SiteFooter() { return ( ); } /* ============================================================= Keystroke pills ============================================================= */ function K({ tone = "dark", children }) { return {children}; } function KSeq({ steps }) { return ( {steps.map((s, i) => typeof s === "string" ? {s} : {s.label} )} ); } /* ============================================================= Topic card ============================================================= */ function TopicCard({ num, eyebrow, title, children, onClick }) { return (
e.currentTarget.style.borderColor = "var(--accent-deep)"} onMouseLeave={e => e.currentTarget.style.borderColor = "var(--stroke)"}>
{num} {eyebrow}

{title}

{children}
); } /* ============================================================= Docs sidebar (used on docs pages; placeholder right now) ============================================================= */ function DocsSidebar({ current, onPick, sections }) { return ( ); } /* ============================================================= Placeholder block — used while help content is unwritten. Visible signal that a section is intentionally empty. ============================================================= */ function Placeholder({ title, note }) { return (
To be written
{title}
{note &&
{note}
}
); } Object.assign(window, { SiteHeader, SiteFooter, K, KSeq, TopicCard, DocsSidebar, Placeholder, WipBanner }); /* ============================================================= Work-in-progress banner — sticky strip below the site header. Diagonal yellow-on-black hazard stripes, LED-red label. Remove this component (and its render in index.html) when the site has real content. ============================================================= */ function WipBanner() { const stripes = `repeating-linear-gradient( 135deg, #f0c040 0 14px, #2a1f10 14px 28px )`; return (
Work in progress · content & screenshots being written
); }