/* global React, ReactDOM, HV */
/* eslint-disable */
const { useState, useEffect } = React;
const DEFAULTS = /*EDITMODE-BEGIN*/{
"layout": "B",
"theme": "light",
"density": "comfortable"
}/*EDITMODE-END*/;
function App() {
const [tweaks, setTweak] = window.useTweaks(DEFAULTS);
// sync theme to for CSS variables
useEffect(() => {
document.documentElement.dataset.theme = tweaks.theme;
}, [tweaks.theme]);
const onThemeToggle = () => setTweak('theme', tweaks.theme === 'dark' ? 'light' : 'dark');
const Layout = tweaks.layout === 'B' ? window.HV.LayoutB
: tweaks.layout === 'C' ? window.HV.LayoutC
: window.HV.LayoutA;
return (
<>
setTweak('layout', v)}
/>
setTweak('theme', v)}
/>
setTweak('density', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();