45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import "./App.css";
|
||
|
|
import { GarminConnection } from "./components/GarminConnection";
|
||
|
|
import { Dashboard } from "./pages/Dashboard";
|
||
|
|
import { ReviewQueue } from "./pages/ReviewQueue";
|
||
|
|
import { WorkoutKinds } from "./pages/WorkoutKinds";
|
||
|
|
|
||
|
|
const TABS = [
|
||
|
|
{ key: "dashboard", label: "Progression", Component: Dashboard },
|
||
|
|
{ key: "review", label: "Review Queue", Component: ReviewQueue },
|
||
|
|
{ key: "kinds", label: "Workout Kinds", Component: WorkoutKinds },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
type TabKey = (typeof TABS)[number]["key"];
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const [tab, setTab] = useState<TabKey>("dashboard");
|
||
|
|
const Active = TABS.find((t) => t.key === tab)!.Component;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="app">
|
||
|
|
<header className="app-header">
|
||
|
|
<h1>smartrun</h1>
|
||
|
|
<nav className="tabs">
|
||
|
|
{TABS.map((t) => (
|
||
|
|
<button
|
||
|
|
key={t.key}
|
||
|
|
className={t.key === tab ? "tab active" : "tab"}
|
||
|
|
onClick={() => setTab(t.key)}
|
||
|
|
>
|
||
|
|
{t.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<GarminConnection />
|
||
|
|
<main>
|
||
|
|
<Active />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|