// Tweaks island for the União Du Norte landing page.
// Applies choices to via data-* attributes and CSS variables — the page CSS reacts.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"direction": "vibrante",
"primary": "#FDBC22",
"radius": 22,
"depoimentos": true
}/*EDITMODE-END*/;
const DIR_OPTS = [
{ value: "vibrante", label: "Vibrante" },
{ value: "clean", label: "Clean" },
{ value: "aconchego", label: "Aconchego" },
];
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const root = document.documentElement;
React.useEffect(() => { root.setAttribute("data-dir", t.direction); }, [t.direction]);
React.useEffect(() => { root.style.setProperty("--c-primary", t.primary); }, [t.primary]);
React.useEffect(() => {
root.style.setProperty("--radius", t.radius + "px");
root.style.setProperty("--radius-sm", Math.max(6, t.radius - 8) + "px");
}, [t.radius]);
React.useEffect(() => { root.setAttribute("data-depo", t.depoimentos ? "on" : "off"); }, [t.depoimentos]);
return (
setTweak("direction", v)}
/>
setTweak("primary", v)}
/>
setTweak("radius", v)}
/>
setTweak("depoimentos", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();