/* global React, ReactDOM, Sidebar, TopBar, FilterBar, EventCard, NF_EVENTS, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle */
const { useState, useMemo } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"density": "cozy",
"cardStyle": "hairline",
"showFlavor": true
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [filter, setFilter] = useState("all");
// Apply theme/density/style to so tokens cascade everywhere.
React.useEffect(() => {
document.documentElement.setAttribute("data-theme", t.theme);
document.documentElement.setAttribute("data-density", t.density);
document.documentElement.setAttribute("data-card-style", t.cardStyle);
}, [t.theme, t.density, t.cardStyle]);
const counts = useMemo(() => {
const c = { all: NF_EVENTS.length, news: 0, job_listing: 0, career_change: 0 };
for (const e of NF_EVENTS) c[e.type]++;
return c;
}, []);
const events = useMemo(() => {
if (filter === "all") return NF_EVENTS;
return NF_EVENTS.filter(e => e.type === filter);
}, [filter]);
return (
setTweak("theme", v)} />
{events.length === 0 ? (
) : (
{events.map(e => (
))}
)}
— You're caught up —
setTweak("theme", v)}
options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
/>
setTweak("density", v)}
options={[
{ value: "compact", label: "Compact" },
{ value: "cozy", label: "Cozy" },
{ value: "comfortable", label: "Roomy" },
]}
/>
setTweak("cardStyle", v)}
options={[
{ value: "hairline", label: "Hairline" },
{ value: "rail", label: "Left rail" },
{ value: "topbar", label: "Top bar" },
]}
/>
setTweak("showFlavor", v)}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();