// OutfitAI landing — UI components (extracted from the OutfitAI design system)
// Loaded via Babel standalone; components are shared through window.
/**
* Viewport breakpoints — see DESIGN_SYSTEM.md §14. Layout lives in inline styles
* throughout this page, and inline styles cannot carry media queries, so the
* breakpoints are read in JS and branched on instead.
*/
const BREAKPOINT = {
tablet: '(max-width: 1024px)',
mobile: '(max-width: 640px)',
narrow: '(max-width: 480px)', // phones proper: two closet columns stop fitting readably
};
function useBreakpoint() {
const read = () => ({
tablet: window.matchMedia(BREAKPOINT.tablet).matches,
mobile: window.matchMedia(BREAKPOINT.mobile).matches,
narrow: window.matchMedia(BREAKPOINT.narrow).matches,
});
const [bp, setBp] = React.useState(read);
React.useEffect(() => {
const mqs = Object.values(BREAKPOINT).map((q) => window.matchMedia(q));
const sync = () => setBp(read());
mqs.forEach((m) => m.addEventListener('change', sync));
return () => mqs.forEach((m) => m.removeEventListener('change', sync));
}, []);
return bp;
}
/**
* Material Symbols Rounded glyph — mirrors Flutter's Icons.*_rounded / *_outlined.
* Requires the Material Symbols Rounded stylesheet (loaded by styles consumers or card HTML).
*/
function Icon({ name, size = 24, filled = false, color = 'currentColor', style }) {
return (
{name}
);
}
/**
* Primary action button — gold→brown gradient (HomePrimaryButton).
* variant "primary" | "text". Loading swaps label for a spinner.
*/
function Button({ label, onClick, variant = 'primary', compact = false, loading = false, block = false, style }) {
const [pressed, setPressed] = React.useState(false);
const { mobile } = useBreakpoint();
if (variant === 'text') {
return (
);
}
const h = compact ? (mobile ? 44 : 36) : 46; // never below 44 on touch, §14
return (
);
}
/**
* Quiet chip — canvas fill, hairline border, radius-sm (piece chips, context
* chips, view affordances, season tags).
*/
function Chip({ label, icon, iconColor = 'var(--ink-muted)', muted = false, translucent = false, style }) {
return (
{icon && }
{label}
);
}
/**
* Section header — tracked-out uppercase eyebrow + bold Jakarta title,
* optional trailing text action (HomeSectionHeader).
*/
function SectionHeader({ eyebrow, title, actionLabel, onAction, style }) {
return (
{actionLabel && (
)}
);
}
/** Page indicator dots — action-brown active, hairline inactive. */
function PageDots({ count, current = 0, style }) {
return (
{Array.from({ length: count }, (_, i) => (
))}
);
}
/**
* Today's Pick hero card — radial "stage" glow holding the outfit cutout,
* solid surface info panel with title + piece chips + CTA (TodayPickPager _PickCard).
*/
function PickCard({ src, alt = '', title, pieces = [], pieceCount, ctaLabel = 'Try this on', onCta, onOpen, stageHeight = 260, imgStyle, style }) {
const count = pieceCount ?? pieces.length + 1;
return (
{src &&
}
{count > 0 && (
)}
{onOpen && (
)}
{title}
{pieces.length > 0
? pieces.slice(0, 3).map((p) => )
: A look from your wardrobe}
);
}
Object.assign(window, { Icon, Button, Chip, SectionHeader, PageDots, PickCard, useBreakpoint });