/* Admin shell — renders the selected admin design full-page. Bottom-right FAB toggles a panel: STYLE (5 layouts) + COLOR (7 palettes). COLOR sets , re-skinning every design via CSS vars. Only designs whose global component is defined are listed. */ const DESIGNS = [ { id: "A1", label: "01 · サイドバー", comp: "AdminSidebar" }, { id: "A2", label: "02 · ミニマル", comp: "AdminMinimal" }, { id: "A3", label: "03 · データ密", comp: "AdminDense" }, { id: "A4", label: "04 · ベント", comp: "AdminBento" }, { id: "A5", label: "05 · ダーク", comp: "AdminDark" }, ]; const THEMES = [ { id: "navy", label: "ネイビー", sw: "#16263f" }, { id: "teal", label: "ティール", sw: "#0e4f4a" }, { id: "wine", label: "ワイン", sw: "#5c2130" }, { id: "forest", label: "フォレスト", sw: "#1f3d2c" }, { id: "slate", label: "スレート", sw: "#2b3440" }, { id: "indigo", label: "インディゴ", sw: "#232a5c" }, { id: "green", label: "グリーン", sw: "#4f8a2e" }, ]; function App() { const [v, setV] = React.useState(() => localStorage.getItem("adm-design") || "A1"); const [theme, setTheme] = React.useState(() => localStorage.getItem("adm-theme") || "navy"); const [open, setOpen] = React.useState(false); React.useEffect(() => { localStorage.setItem("adm-design", v); }, [v]); React.useEffect(() => { localStorage.setItem("adm-theme", theme); document.documentElement.setAttribute("data-theme", theme); }, [theme]); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const available = DESIGNS.filter((d) => typeof window[d.comp] === "function"); const cur = available.find((d) => d.id === v) || available[0]; const Comp = cur ? window[cur.comp] : null; const curTheme = THEMES.find((t) => t.id === theme) || THEMES[0]; const curNo = cur ? String(available.indexOf(cur) + 1).padStart(2, "0") : "01"; return ( {Comp ? :

読み込み中…

} {open &&

setOpen(false)} />}

); } ReactDOM.createRoot(document.getElementById("root")).render();