/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, SB_EASE */
// Mobile site shared bits — compact heads, phone chrome, sheet chrome (anatomy from Studio · Mobile V2).
const MPill = ({ children, active, dark, onClick, style }) => (
{children}
);
const MPillP = ({ children, active, onClick, style }) => (
{children}
);
const MShell = ({ children, dark = false, bg, pad = '56px 22px' }) => (
);
// horizontally scrollable chip rail
const MRail = ({ children, style }) => (
{children}
);
const MHead = ({ title, sub, dark = false, center = true }) => (
);
const MCopyHead = ({ k, dark = false, center = true, cta = true }) => {
const c = window.useCopy(k);
return (
{c.cta}
);
};
// slim phone frame — the product chrome for every app mockup on the mobile site
const MPhone = ({ children, w = 292, ratio = '9 / 19', bg = CREAM, style }) => (
);
const MAppHeader = ({ pad = '14px 15px 8px' }) => (
sozee
⚡
9.38k
);
// sheet chrome — "Choose your source" anatomy: title + sub + close, body, Back · dots · Continue footer
const MSheet = ({ title, sub, children, style }) => (
{sub &&
{sub}
}
{children}
);
const MSheetFooter = ({ step = 1, of = 4, cta = 'Continue', gen = false, style }) => (
Back
{Array.from({ length: of }).map((_, i) => (
{cta}
{gen ? ⚡150
:
);
// full-width gradient GENERATE pill — from the mobile Compose sheet
const MGenerate = ({ label = 'Generate', count, cost = '0.50', active = true }) => (
✦ {label}
{count &&
×{count}
⚡ {cost}
}
);
Object.assign(window, { MPill, MPillP, MShell, MRail, MHead, MCopyHead, MPhone, MAppHeader, MSheet, MSheetFooter, MGenerate });
sozee
⚡
9.38k