Task 0df715b5: React scaffold, build and serve (#187)

2026-09-23 16:39:36 -04:00
parent 22f1a6861d
commit 48d0c4ef86
11 changed files with 3291 additions and 0 deletions
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import "./App.css";
+
+const TABS = [
+  { id: "today", label: "Today" },
+  { id: "tasks", label: "Tasks" },
+  { id: "schedule", label: "Schedule" },
+  { id: "history", label: "History" },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+export default function App() {
+  const [active, setActive] = useState<TabId>("today");
+
+  return (
+    <div className="admin-shell">
+      <header className="admin-header">
+        <h1 className="admin-title">NestQuest Admin</h1>
+        <p className="admin-subline">Admin console</p>
+      </header>
+      <main
+        className="admin-panel"
+        role="tabpanel"
+        aria-labelledby={`tab-${active}`}
+      >
+        <p className="admin-placeholder">
+          {TABS.find((tab) => tab.id === active)?.label} placeholder — screens
+          arrive in later tasks.
+        </p>
+      </main>
+      <nav className="admin-tabbar" aria-label="Admin sections">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            id={`tab-${tab.id}`}
+            type="button"
+            role="tab"
+            aria-selected={tab.id === active}
+            className={tab.id === active ? "admin-tab active" : "admin-tab"}
+            onClick={() => setActive(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+    </div>
+  );
+}