67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import { LayoutDashboard, Presentation } from 'lucide-react'
|
||
|
|
import { PlatformTopology } from './PlatformTopology'
|
||
|
|
import { PresentationView } from './PresentationView'
|
||
|
|
import type { AgentAnim, WorkloadData } from '../../types'
|
||
|
|
import { cn } from '../../lib/utils'
|
||
|
|
import { subTabActive, subTabIdle } from '../../lib/tabActive'
|
||
|
|
|
||
|
|
type PlatformTab = 'topology' | 'presentation'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
workload: WorkloadData | null
|
||
|
|
animations: Record<string, AgentAnim>
|
||
|
|
selectedNodeId: string | null
|
||
|
|
onNodeClick: (nodeId: string) => void
|
||
|
|
pulse: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const TABS: { id: PlatformTab; label: string; icon: typeof LayoutDashboard }[] = [
|
||
|
|
{ id: 'topology', label: 'Topology', icon: LayoutDashboard },
|
||
|
|
{ id: 'presentation', label: 'Presentation', icon: Presentation },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function PlatformView({ workload, animations, selectedNodeId, onNodeClick, pulse }: Props) {
|
||
|
|
const [tab, setTab] = useState<PlatformTab>('topology')
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||
|
|
<div className="panel flex shrink-0 items-center gap-1 px-2 py-1.5">
|
||
|
|
{TABS.map(({ id, label, icon: Icon }) => (
|
||
|
|
<button
|
||
|
|
key={id}
|
||
|
|
type="button"
|
||
|
|
onClick={() => setTab(id)}
|
||
|
|
className={cn(
|
||
|
|
'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[10px] font-medium transition-all',
|
||
|
|
tab === id ? subTabActive : subTabIdle,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon className="h-3.5 w-3.5" />
|
||
|
|
{label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
{tab === 'presentation' && (
|
||
|
|
<span className="ml-auto text-[9px] text-foreground-muted">
|
||
|
|
Live cluster deck · all running services
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="min-h-0 flex-1 overflow-hidden pt-1">
|
||
|
|
{tab === 'topology' ? (
|
||
|
|
<PlatformTopology
|
||
|
|
workload={workload}
|
||
|
|
animations={animations}
|
||
|
|
selectedNodeId={selectedNodeId}
|
||
|
|
onNodeClick={onNodeClick}
|
||
|
|
pulse={pulse}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<PresentationView embedded />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|