const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;
function App() {
// persisted state
const [themeKey, setThemeKey] = useStateApp(() => {
return localStorage.getItem('ls_theme') || 'calor';
});
const [lang, setLang] = useStateApp(() => localStorage.getItem('ls_lang') || 'es');
const [scrolled, setScrolled] = useStateApp(false);
const [tweaksOn, setTweaksOn] = useStateApp(false);
const contactRef = useRefApp(null);
useEffectApp(() => { localStorage.setItem('ls_theme', themeKey); }, [themeKey]);
useEffectApp(() => { localStorage.setItem('ls_lang', lang); }, [lang]);
// Edit-mode protocol
useEffectApp(() => {
const handler = (ev) => {
if (!ev?.data?.type) return;
if (ev.data.type === '__activate_edit_mode') setTweaksOn(true);
if (ev.data.type === '__deactivate_edit_mode') setTweaksOn(false);
if (ev.data.type === '__edit_mode_set_keys' && ev.data.edits) {
if (ev.data.edits.themeKey) setThemeKey(ev.data.edits.themeKey);
}
};
window.addEventListener('message', handler);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', handler);
}, []);
useEffectApp(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const theme = THEMES[themeKey];
const t = CONTENT[lang];
const scrollToContact = () => {
contactRef.current?.scrollTo?.();
document.getElementById('contact')?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
};
const scrollToSocial = () => {
document.getElementById('social')?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
};
// apply body bg to avoid white flashes on long scroll
useEffectApp(() => {
document.body.style.background = theme.bg;
document.body.style.color = theme.ink;
}, [theme]);
// keep + document title in sync with language
useEffectApp(() => {
document.documentElement.lang = lang === 'en' ? 'en' : 'es';
document.title = lang === 'en'
? 'La Salsera — Daily classes and dancing in Buenos Aires'
: 'La Salsera — Clases y baile todos los días en Buenos Aires';
}, [lang]);
return (
{
setThemeKey(k);
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { themeKey: k } }, '*');
}} visible={tweaksOn} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();