/* Day Trip Planner — shared UI primitives, icons, illustrations, frame */ // ───────────────────────────────────────────────────────────── // Icons — simple consistent line set (24×24, stroke 1.8) // ───────────────────────────────────────────────────────────── function Icon({ name, size = 22, stroke = 1.8, fill = false, style }) { const p = { pin: <>, crosshair: <>, clock: <>, fork: <>, hike: <>, bag: <>, museum: <>, beer: <>, kid: <>, scenic: <>, star: <>, car: <>, dollar: <>, users: <>, chevR: <>, chevD: <>, chevL: <>, plus: <>, check: <>, swap: <>, map: <>, heart: <>, sparkle: <>, reroll: <>, x: <>, trash: <>, arrowUp: <>, arrowR: <>, open: <>, sun: <>, }[name]; return ( ); } const INTEREST_ICON = { Dining: 'fork', Hiking: 'hike', Shopping: 'bag', Museums: 'museum', Breweries: 'beer', 'Kid-friendly': 'kid', 'Scenic Drives': 'scenic', 'Quirky/Oddities': 'star', }; // ───────────────────────────────────────────────────────────── // Status bar // ───────────────────────────────────────────────────────────── function StatusBar({ theme = 'dark', floating = false, time = '9:41' }) { return (
{time}
); } // ───────────────────────────────────────────────────────────── // Phone frame (interactive) + Board frame (overview) // ───────────────────────────────────────────────────────────── function PhoneFrame({ children, homeTheme = 'dark' }) { return (
{children}
); } function BoardFrame({ children, homeTheme = 'dark' }) { return (
{children}
); } // ───────────────────────────────────────────────────────────── // Illustrations — winding road + compass (stylized, abstract) // ───────────────────────────────────────────────────────────── function RoadIllustration({ style }) { return ( ); } function Compass({ size = 132, spin = false, style }) { return ( ); } // ───────────────────────────────────────────────────────────── // Map preview — stylized minimal map with route + numbered pins // ───────────────────────────────────────────────────────────── function MapPreview({ height = 168, style, pins = 4, active = null }) { const pts = [[42, 120], [120, 78], [205, 116], [300, 58]]; return (
{/* water */} {/* parks */} {/* faint road grid */} {/* route */} {/* pins */} {pts.slice(0, pins).map((p, i) => ( {i + 1} ))}
); } // ───────────────────────────────────────────────────────────── // Small building blocks // ───────────────────────────────────────────────────────────── function Placeholder({ label, tone, style, labelStyle, src }) { const [failed, setFailed] = React.useState(false); // reset the error state if the source changes (e.g. a stop is rerolled/swapped) React.useEffect(() => { setFailed(false); }, [src]); const showImg = src && !failed; return (
{showImg && ( {label setFailed(true)} /> )} {label && !showImg && {label}}
); } function Tag({ children, tone }) { return {children}; } function Stat({ k, children }) { return (
{k} {children}
); } function Button({ variant = 'primary', size, pill, children, icon, iconR, onClick, disabled, style }) { const cls = ['btn', 'btn-' + variant, size === 'sm' ? 'btn-sm' : '', pill ? 'btn-pill' : ''].join(' '); return ( ); } function IconButton({ name, onClick, style, size = 20, label }) { return ( ); } Object.assign(window, { Icon, INTEREST_ICON, StatusBar, PhoneFrame, BoardFrame, RoadIllustration, Compass, MapPreview, Placeholder, Tag, Stat, Button, IconButton, });