/* global React, ReactDOM */
const { useEffect, useRef } = React;
const ACCENT_PALETTES = {
corail: ["#F05B62", "#F9BBB2", "#FFEFEC"],
terracotta: ["#C8553D", "#F1C7B9", "#FBEDE6"],
prune: ["#7C3A66", "#E5C9D9", "#F6E9F0"],
};
function App() {
const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
// Reveal-on-scroll observer
useEffect(() => {
const els = document.querySelectorAll(".reveal");
if (!("IntersectionObserver" in window)) {
els.forEach((el) => el.classList.add("in"));
return;
}
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
obs.unobserve(e.target);
}
});
},
{ rootMargin: "-8% 0px -8% 0px", threshold: 0 }
);
els.forEach((el) => obs.observe(el));
return () => obs.disconnect();
});
// Sync tweaks to
useEffect(() => {
const root = document.documentElement;
root.setAttribute("data-accent", t.accent);
root.setAttribute("data-density", t.density);
}, [t.accent, t.density]);
const currentPalette = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.corail;
return (
<>
{t.showPullQuote && }
{
const key = Object.keys(ACCENT_PALETTES).find(
(k) => ACCENT_PALETTES[k][0] === v[0]
);
setTweak("accent", key || "corail");
}}
/>
setTweak("density", v)}
/>
setTweak("heroTitle", v)}
/>
setTweak("showPullQuote", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();