File size: 1,844 Bytes
8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 86f6a2a 8b41737 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import { useState, lazy, Suspense } from "react";
const VisualizerApp = lazy(() => import("./visualizer/VisualizerApp"));
const ExperimentsApp = lazy(() => import("./experiments/ExperimentsApp"));
type PageId = "experiments" | "visualizer";
const PAGES: { id: PageId; label: string }[] = [
{ id: "experiments", label: "Experiments" },
{ id: "visualizer", label: "Visualizer" },
];
export default function App() {
const [activePage, setActivePage] = useState<PageId>("experiments");
return (
<div className="h-screen flex flex-col bg-gray-950 text-gray-100">
{/* Top navigation bar */}
<div className="flex items-center border-b border-gray-700 bg-gray-900 px-4 shrink-0">
<span className="text-sm font-semibold text-gray-300 mr-6 py-2.5">
Research Dashboard
</span>
{PAGES.map((page) => (
<button
key={page.id}
onClick={() => setActivePage(page.id)}
className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
activePage === page.id
? "border-cyan-500 text-cyan-400"
: "border-transparent text-gray-500 hover:text-gray-300"
}`}
>
{page.label}
</button>
))}
<div className="ml-auto text-xs text-gray-600 px-3">
reasoning-degeneration-dev
</div>
</div>
{/* Active page */}
<div className="flex-1 overflow-hidden">
<Suspense
fallback={
<div className="flex items-center justify-center h-full text-gray-500">
Loading...
</div>
}
>
{activePage === "experiments" && <ExperimentsApp />}
{activePage === "visualizer" && <VisualizerApp />}
</Suspense>
</div>
</div>
);
}
|