60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { Dashboard } from "./components/Dashboard";
|
||
|
|
import { Inventory } from "./components/Inventory";
|
||
|
|
import { ProtocolChecker } from "./components/ProtocolChecker";
|
||
|
|
import {
|
||
|
|
LayoutDashboard,
|
||
|
|
Package,
|
||
|
|
FileCheck
|
||
|
|
} from "lucide-react";
|
||
|
|
import logo from "figma:asset/e1cc93b8a3ca5c34482c2d8ace21b3610ba98443.png";
|
||
|
|
|
||
|
|
type Tab = "dashboard" | "inventory" | "protocol";
|
||
|
|
|
||
|
|
export default function App() {
|
||
|
|
const [activeTab, setActiveTab] = useState<Tab>("dashboard");
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ id: "dashboard" as Tab, label: "Dashboard", icon: LayoutDashboard },
|
||
|
|
{ id: "inventory" as Tab, label: "Inventory", icon: Package },
|
||
|
|
{ id: "protocol" as Tab, label: "Protocol Checker", icon: FileCheck },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-screen bg-secondary">
|
||
|
|
{/* Sidebar */}
|
||
|
|
<aside className="w-64 bg-card border-r border-border flex flex-col">
|
||
|
|
<div className="p-6 border-b border-border flex items-center justify-center">
|
||
|
|
<img src={logo} alt="labwise" className="h-10" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="flex-1 p-4">
|
||
|
|
{navItems.map((item) => {
|
||
|
|
const Icon = item.icon;
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={item.id}
|
||
|
|
onClick={() => setActiveTab(item.id)}
|
||
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors ${
|
||
|
|
activeTab === item.id
|
||
|
|
? "bg-accent text-primary"
|
||
|
|
: "text-muted-foreground hover:bg-muted"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Icon className="w-5 h-5" />
|
||
|
|
<span>{item.label}</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
{/* Main Content */}
|
||
|
|
<main className="flex-1 overflow-auto">
|
||
|
|
{activeTab === "dashboard" && <Dashboard setActiveTab={setActiveTab} />}
|
||
|
|
{activeTab === "inventory" && <Inventory />}
|
||
|
|
{activeTab === "protocol" && <ProtocolChecker />}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|