File size: 1,753 Bytes
760f595 | 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 | "use client";
import { useState } from "react";
import { LiveCompare } from "./tabs/LiveCompare";
import { Benchmark } from "./tabs/Benchmark";
import { CostAnalysis } from "./tabs/CostAnalysis";
import { GraphExplorer } from "./tabs/GraphExplorer";
const TABS = [
{ id: "live", label: "Live Compare", icon: "🔴", color: "#FF6B00" },
{ id: "benchmark", label: "Benchmark", icon: "📊", color: "#0072CE" },
{ id: "cost", label: "Cost Analysis", icon: "💰", color: "#cc785c" },
{ id: "graph", label: "Graph Explorer", icon: "🕸️", color: "#5db8a6" },
] as const;
type TabId = (typeof TABS)[number]["id"];
export function DashboardTabs() {
const [active, setActive] = useState<TabId>("live");
return (
<section className="section-sm" style={{ background: "var(--color-surface-soft)" }}>
<div className="container">
{/* Tab bar */}
<div className="tab-bar mb-8">
{TABS.map((tab) => (
<button
key={tab.id}
id={tab.id}
className={`tab-item ${active === tab.id ? "tab-item-active" : ""}`}
onClick={() => setActive(tab.id)}
style={
active === tab.id
? { borderBottom: `2px solid ${tab.color}` }
: undefined
}
>
<span className="mr-2">{tab.icon}</span>
{tab.label}
</button>
))}
</div>
{/* Tab content */}
<div>
{active === "live" && <LiveCompare />}
{active === "benchmark" && <Benchmark />}
{active === "cost" && <CostAnalysis />}
{active === "graph" && <GraphExplorer />}
</div>
</div>
</section>
);
}
|