/* maydays — shared components */ const { useState, useEffect, useRef, useMemo } = React; /* ============================================================ Botanical SVG accents ============================================================ */ // Tiny sprig (3 small leaves on a curved stem) function BotanicalSprig({ size = 24, color = 'var(--sage)' }) { return ( ); } // A small fern/branch with paired leaves function BotanicalFern({ size = 28, color = 'var(--sage)' }) { const leaves = []; for (let i = 0; i < 5; i++) { const y = 4 + i * 4; const len = 7 - i * 0.8; leaves.push( ); } return ( {leaves} ); } // A vine running vertically (for lesson margin) function VineColumn({ height = 800, color = 'var(--sage)' }) { // Make a wavy stem with little leaf pairs const segments = Math.floor(height / 60); const stops = []; for (let i = 0; i <= segments; i++) { const y = (i / segments) * 100; const x = 50 + Math.sin(i * 1.1) * 18; stops.push([x, y]); } const path = stops.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' '); return ( {stops.filter((_,i) => i > 0 && i < stops.length-1).map(([x,y], i) => { const left = i % 2 === 0; const lx = left ? x - 10 : x + 10; return ( ); })} ); } // Horizontal branch divider (replaces the simple line divider sometimes) function BranchDivider({ color = 'var(--sage)' }) { return (
); } // Corner ornament (botanical curlicue) function CornerOrnament({ color = 'var(--sage)' }) { return ( ); } const ORN = { fleuron: '❦', flower: '❀', leaf: '☘', sprig: '❧' }; /* ============================================================ Brand mark (maydays with M and D highlighted = MD) ============================================================ */ function BrandText() { return ( maydays ); } function BrandMark() { // simple botanical mark instead of the M·D circle return ( ); } /* ============================================================ Header / Crumbs / Footer ============================================================ */ function Header({ route, onNavigate, onOpenSearch }) { // any library-related route (the Step hubs, deep pages, Progress) lights up the Library tab const libraryRouteNames = ['library','step','subject','topic','lesson','progress']; const rdxRouteNames = ['rapids','rapids-filter','rapids-quiz','rdx','rdx-section']; const toolsRouteNames = ['tools']; const isLibActive = libraryRouteNames.includes(route.name); const isRdxActive = rdxRouteNames.includes(route.name); const isToolsActive= toolsRouteNames.includes(route.name); return (
onNavigate({ name: 'home' })}>
Search the curriculum ⌘K
); } /* ---------- Header dropdown (hover/focus) ---------- */ function HeaderDropdown({ label, active, items, onPick, onActivate }) { const [open, setOpen] = useState(false); const ref = useRef(null); const closeTimer = useRef(null); const openNow = () => { clearTimeout(closeTimer.current); setOpen(true); }; const closeSoon = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setOpen(false), 120); }; // close on outside click / esc useEffect(() => { const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = e => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, []); return (
{ onActivate && onActivate(); setOpen(false); }}> {label} ▾
{items.map(it => ( ))}
); } function Crumbs({ items, onNavigate }) { return (
{items.map((it, i) => ( {i > 0 && /} {it.to ? onNavigate(it.to)} style={{ cursor: 'pointer' }}>{it.label} : {it.label}} ))}
); } function Footer() { return (
© maydays · est. 2026 · A study companion for Step 1 and Step 2 CK
{ORN.fleuron}
v0.2 · prototype
); } /* ============================================================ Mastery dots / progress / subject card ============================================================ */ function MasteryDots({ value }) { const cls = (target) => { if (value === 'm') return 'm'; if (value === 'l' && target <= 1) return 'l'; return ''; }; return ( ); } function Progress({ value, tone = 'clay' }) { return (
); } function SubjectCard({ subject, onClick }) { return (
{subject.title}
{subject.blurb}
{subject.progress}% · {subject.topics.length} topics · {subject.count} cards
{subject.topics.length} topics Open →
); } /* ============================================================ Botanical placeholder frame ============================================================ */ function BotanicalFrame({ label = 'botanical · placeholder', height }) { return (
{ORN.fleuron}
{ORN.fleuron}
{ORN.fleuron}
{ORN.fleuron}
{label}
); } /* ============================================================ Anki button (visual only for now — wires up later via AnkiConnect) ============================================================ */ function AnkiButton({ label = 'Send deck to Anki', count = null, onClick }) { return ( Coming soon. Will sync via the AnkiConnect addon. ); } /* ============================================================ Search Overlay ============================================================ */ function SearchOverlay({ open, onClose, onNavigate, index }) { const [q, setQ] = useState(''); const [hl, setHl] = useState(0); const inputRef = useRef(null); useEffect(() => { if (open) { setQ(''); setHl(0); setTimeout(() => inputRef.current && inputRef.current.focus(), 50); } }, [open]); const filtered = useMemo(() => { if (!q.trim()) return index.slice(0, 18); const needle = q.toLowerCase(); const score = (it) => { const t = it.title.toLowerCase(); if (t === needle) return 0; if (t.startsWith(needle)) return 1; if (t.includes(needle)) return 2; if (it.path.toLowerCase().includes(needle)) return 3; return 99; }; return index .map(it => ({ it, s: score(it) })) .filter(x => x.s < 99) .sort((a,b) => a.s - b.s) .slice(0, 30) .map(x => x.it); }, [q, index]); if (!open) return null; const choose = (it) => { const { stepId, subjectId, topicId, subtopicId } = it.ref; if (subtopicId) onNavigate({ name: 'lesson', stepId, subjectId, topicId, subtopicId }); else if (topicId) onNavigate({ name: 'topic', stepId, subjectId, topicId }); else if (subjectId) onNavigate({ name: 'subject', stepId, subjectId }); else onNavigate({ name: 'step', stepId }); onClose(); }; const onKey = (e) => { if (e.key === 'Escape') { onClose(); return; } if (e.key === 'ArrowDown') { setHl(h => Math.min(h+1, filtered.length-1)); e.preventDefault(); } if (e.key === 'ArrowUp') { setHl(h => Math.max(h-1, 0)); e.preventDefault(); } if (e.key === 'Enter' && filtered[hl]) { choose(filtered[hl]); } }; return (
e.stopPropagation()}>
{ setQ(e.target.value); setHl(0); }} onKeyDown={onKey} /> esc
{filtered.length === 0 &&
No matches.
} {filtered.map((it, i) => (
setHl(i)} onClick={() => choose(it)}> {it.kind}
{it.title}
{it.path}
))}
); } Object.assign(window, { Header, Crumbs, MasteryDots, Progress, SubjectCard, BotanicalFrame, BotanicalSprig, BotanicalFern, VineColumn, BranchDivider, CornerOrnament, SearchOverlay, Footer, ORN, BrandText, BrandMark, AnkiButton, });