File size: 1,794 Bytes
a42bc3b | 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 | /**
* ComputeSettingsTabs — segmented navigation for the Compute section.
*
* Splits the feature into the three concerns the design separates — inventory
* (Resources), connections (Sources), and policy (Routing) — instead of one
* long scroll. "Connect source" on the Resources tab deep-links to Sources.
*/
import React, { useState } from "react";
import { Cpu, Server, SlidersHorizontal } from "lucide-react";
import ComputeResourcesPanel from "./ComputeResourcesPanel";
import ComputeSourcesSettings from "./ComputeSourcesSettings";
import RoutingPolicyEditor from "./RoutingPolicyEditor";
type Tab = "resources" | "sources" | "routing";
const TABS: { id: Tab; label: string; Icon: typeof Cpu }[] = [
{ id: "resources", label: "Resources", Icon: Cpu },
{ id: "sources", label: "Sources", Icon: Server },
{ id: "routing", label: "Routing", Icon: SlidersHorizontal },
];
export default function ComputeSettingsTabs() {
const [tab, setTab] = useState<Tab>("resources");
return (
<div className="space-y-4">
<div className="inline-flex rounded-xl border border-white/10 bg-black/30 p-1">
{TABS.map(({ id, label, Icon }) => (
<button
key={id}
onClick={() => setTab(id)}
className={`h-9 px-4 rounded-lg text-xs font-medium inline-flex items-center gap-1.5 transition-colors ${
tab === id ? "bg-white/10 text-white" : "text-white/50 hover:text-white/80"
}`}
>
<Icon size={14} /> {label}
</button>
))}
</div>
{tab === "resources" && <ComputeResourcesPanel onConnectSource={() => setTab("sources")} />}
{tab === "sources" && <ComputeSourcesSettings />}
{tab === "routing" && <RoutingPolicyEditor />}
</div>
);
}
|