/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle */
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"color": "paper",
"type": "swiss",
"hero": "quiet",
"dark": false
}/*EDITMODE-END*/;
function App() {
const data = window.PORTFOLIO;
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const active = useActiveSection(["about", "stack", "projects", "experience", "contact"]);
useReveal();
// Apply theme + variant attrs to
useEffect(() => {
const root = document.documentElement;
root.setAttribute("data-theme", tweaks.dark ? "dark" : "light");
root.setAttribute("data-color", tweaks.color);
root.setAttribute("data-type", tweaks.type);
}, [tweaks.dark, tweaks.color, tweaks.type]);
const toggleTheme = () => setTweak("dark", !tweaks.dark);
return (
<>
setTweak("color", v)}
options={[
{ value: "paper", label: "Paper" },
{ value: "warm", label: "Warm" },
{ value: "cool", label: "Cool" }
]}
/>
setTweak("dark", v)}
/>
setTweak("type", v)}
options={[
{ value: "swiss", label: "Swiss" },
{ value: "editorial", label: "Editorial" },
{ value: "mono", label: "Mono" }
]}
/>
setTweak("hero", v)}
options={[
{ value: "quiet", label: "Quiet" },
{ value: "grid", label: "Grid" },
{ value: "marquee", label: "Marquee" }
]}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();