/* App + Tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroLayout": "split",
"displayCase": "uppercase",
"ctaColor": "red",
"showHeroArt": true
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks as data attributes on so CSS can react.
React.useEffect(() => {
document.body.dataset.heroLayout = t.heroLayout;
document.body.dataset.displayCase = t.displayCase;
document.body.dataset.ctaColor = t.ctaColor;
}, [t]);
return (
<>
setTweak("heroLayout", v)}
options={[
{ value: "split", label: "Split" },
{ value: "centered", label: "Centered" },
]}
/>
setTweak("showHeroArt", v)}
/>
setTweak("displayCase", v)}
options={[
{ value: "uppercase", label: "UPPER" },
{ value: "sentence", label: "Sentence" },
]}
/>
setTweak("ctaColor", v)}
options={[
{ value: "red", label: "Cartel Red" },
{ value: "navy", label: "Cartel Navy" },
]}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();