Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 11x 11x 33x 4x | import { useState, lazy, Suspense } from "react"
import Navigation from "../components/Navigation"
// Import pages as components (they render their own content but we strip their Navigation)
import HabitsContent from "./Habits"
import TasksContent from "./Tasks"
import StatsContent from "./Stats"
const tabs = [
{ key: "habits", label: "Привычки", icon: "🎯" },
{ key: "tasks", label: "Задачи", icon: "✅" },
{ key: "stats", label: "Статистика", icon: "📊" },
]
export default function Tracker() {
const [activeTab, setActiveTab] = useState("habits")
return (
<div className="min-h-screen bg-surface-50 dark:bg-gray-950 gradient-mesh pb-24">
<header className="bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl border-b border-gray-100/50 dark:border-gray-800 sticky top-0 z-10">
<div className="max-w-lg mx-auto px-4 py-4">
<h1 className="text-xl font-display font-bold text-gray-900 dark:text-white">
📊 Трекер
</h1>
</div>
<div className="max-w-lg mx-auto px-4 pb-3 flex gap-2">
{tabs.map((t) => (
<button
key={t.key}
onClick={() => setActiveTab(t.key)}
className={`flex-1 py-2 rounded-xl text-sm font-semibold transition ${
activeTab === t.key
? "bg-primary-500 text-white"
: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
}`}
>
{t.icon} {t.label}
</button>
))}
</div>
</header>
<div>
{activeTab === "habits" && <HabitsContent embedded />}
{activeTab === "tasks" && <TasksContent embedded />}
{activeTab === "stats" && <StatsContent embedded />}
</div>
<Navigation />
</div>
)
}
|