/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, useTweaks */
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mood": "nude",
"pace": "editorial",
"motion": "living"
}/*EDITMODE-END*/;
function TweaksApp() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks to as data attributes — CSS does the rest.
useEffect(() => {
const html = document.documentElement;
html.setAttribute("data-mood", tweaks.mood);
html.setAttribute("data-pace", tweaks.pace);
html.setAttribute("data-motion", tweaks.motion);
}, [tweaks.mood, tweaks.pace, tweaks.motion]);
return (
setTweak("mood", v)}
options={[
{ value: "nude", label: "Nude" },
{ value: "champagne", label: "Champagne" },
{ value: "noir", label: "Noir" },
]}
/>
setTweak("pace", v)}
options={[
{ value: "compact", label: "Compacto" },
{ value: "editorial", label: "Editorial" },
{ value: "cinematic", label: "Cinema" },
]}
/>
setTweak("motion", v)}
options={[
{ value: "off", label: "Off" },
{ value: "calm", label: "Calmo" },
{ value: "living", label: "Vivo" },
]}
/>
);
}
const tweaksMount = document.createElement("div");
tweaksMount.id = "tweaks-root";
document.body.appendChild(tweaksMount);
ReactDOM.createRoot(tweaksMount).render();