// Tweaks panel for the hi-fi hybrid mockup.
// Lets the user swap display type, gallery layout, ornament density, and accent emphasis.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"display": "playfair",
"gallery": "masonry",
"decoration": "on",
"emphasis": "duo"
}/*EDITMODE-END*/;
const HOST = document.documentElement;
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Mirror state to data-* attributes on so CSS picks it up.
React.useEffect(() => {
Object.entries(t).forEach(([k, v]) => HOST.setAttribute('data-' + k, v));
}, [t]);
return (
setTweak('display', v)}
options={[
{ value: 'playfair', label: 'Playfair' },
{ value: 'dmserif', label: 'DM Serif' },
{ value: 'oswald', label: 'Oswald' },
{ value: 'bebas', label: 'Bebas' },
]}
/>
setTweak('emphasis', v)}
options={[
{ value: 'duo', label: 'Red + Green' },
{ value: 'red', label: 'All Red' },
{ value: 'green', label: 'Green-led' },
]}
/>
setTweak('gallery', v)}
options={[
{ value: 'masonry', label: 'Masonry' },
{ value: 'grid', label: 'Even grid' },
]}
/>
setTweak('decoration', v)}
options={[
{ value: 'on', label: 'On' },
{ value: 'off', label: 'Off' },
]}
/>
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();