// Main app — orchestrates the page + Tweaks panel. const THEMES = [ { key: "electric", label: "Electric", colors: ["#0a0a0a", "#d4ff3f", "#ffffff"] }, { key: "violet", label: "Violet", colors: ["#0d0a1f", "#b58cff", "#f3edff"] }, { key: "coral", label: "Coral", colors: ["#faf6f1", "#ff5d3c", "#181410"] }, { key: "mint", label: "Mint", colors: ["#f6f8f4", "#0d6b4f", "#0c1612"] }, ]; function ThemeChips({ value, onChange }) { return (
{THEMES.map(th => { const [hero, ...rest] = th.colors; const on = th.key === value; return ( ); })}
); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "electric", "font": "modern", "hero": "score", "badge": "pill", "layout": "masonry" }/*EDITMODE-END*/; const REVIEWS = window.REVIEWS; const SOURCES = window.SOURCES; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [filter, setFilter] = React.useState("all"); const [sort, setSort] = React.useState("newest"); // Sync theme + font to for CSS var swap React.useEffect(() => { document.documentElement.setAttribute("data-theme", t.theme); document.documentElement.setAttribute("data-font", t.font); }, [t.theme, t.font]); const counts = React.useMemo(() => { const c = {}; for (const r of REVIEWS) c[r.source] = (c[r.source] || 0) + 1; return c; }, []); const visible = React.useMemo(() => { let arr = filter === "all" ? REVIEWS.slice() : REVIEWS.filter(r => r.source === filter); arr.sort((a, b) => { switch (sort) { case "oldest": return a.date.localeCompare(b.date); case "rating-high": return b.rating - a.rating || b.date.localeCompare(a.date); case "rating-low": return a.rating - b.rating || b.date.localeCompare(a.date); case "helpful": return b.helpful - a.helpful; default: return b.date.localeCompare(a.date); } }); return arr; }, [filter, sort]); const renderHero = () => { if (t.hero === "quote") return ; if (t.hero === "stats") return ; return ; }; const renderLayout = () => { if (t.layout === "grid") { return (
{visible.map(r => )}
); } if (t.layout === "feed") { return (
{visible.map(r => )}
); } if (t.layout === "list") { return (
{visible.map(r => )}
); } return (
{visible.map(r => )}
); }; return ( <>
eitareviews.com
{renderHero()}
ALL REVIEWS

What people are saying.

{visible.length} of {REVIEWS.length} shown · sorted by {sort.replace("-", " ")}
setTweak("layout", v)} /> {renderLayout()}
setTweak("theme", v)} /> setTweak("font", v)} /> setTweak("hero", v)} /> setTweak("layout", v)} /> setTweak("badge", v)} /> ); } ReactDOM.createRoot(document.getElementById("root")).render();