54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet.js';
|
|
import type { DatacenterMarkerData } from './datacenter-marker.js';
|
|
|
|
interface DatacenterDetailPanelProps {
|
|
datacenter: DatacenterMarkerData | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function DatacenterDetailPanel({ datacenter, onClose }: DatacenterDetailPanelProps) {
|
|
return (
|
|
<Sheet open={datacenter !== null} onOpenChange={open => !open && onClose()}>
|
|
<SheetContent side="right" className="overflow-y-auto bg-zinc-950 text-zinc-100">
|
|
{datacenter && (
|
|
<>
|
|
<SheetHeader>
|
|
<SheetTitle className="text-zinc-100">{datacenter.name}</SheetTitle>
|
|
<SheetDescription className="text-zinc-400">
|
|
{datacenter.operator} · {datacenter.region_name} ({datacenter.region_code})
|
|
</SheetDescription>
|
|
</SheetHeader>
|
|
|
|
<div className="flex flex-col gap-4 p-4">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<MetricItem label="Capacity" value={`${datacenter.capacity_mw} MW`} />
|
|
<MetricItem label="Status" value={datacenter.status} />
|
|
<MetricItem label="Year Opened" value={String(datacenter.year_opened)} />
|
|
<MetricItem label="Grid Region" value={datacenter.region_code} />
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
|
|
<div className="mb-1 text-xs font-medium text-zinc-500">Location</div>
|
|
<div className="font-mono text-sm text-zinc-300">
|
|
{datacenter.lat.toFixed(4)}, {datacenter.lng.toFixed(4)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|
|
|
|
function MetricItem({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
|
|
<div className="mb-0.5 text-xs font-medium text-zinc-500">{label}</div>
|
|
<div className="text-sm font-semibold text-zinc-200">{value}</div>
|
|
</div>
|
|
);
|
|
}
|