| import { AlertTriangle, PowerOff, Radio, Wifi, WifiOff } from "lucide-react"; |
| import type { PlatformStatus } from "@/lib/api"; |
| import { isoTimeAgo } from "@/lib/utils"; |
| import { Badge } from "@nous-research/ui/ui/components/badge"; |
| import { Card, CardContent, CardHeader, CardTitle } from "@nous-research/ui/ui/components/card"; |
| import { useI18n } from "@/i18n"; |
|
|
| export function PlatformsCard({ platforms }: PlatformsCardProps) { |
| const { t } = useI18n(); |
| const platformStateBadge: Record< |
| string, |
| { tone: "success" | "warning" | "destructive" | "outline"; label: string } |
| > = { |
| connected: { tone: "success", label: t.status.connected }, |
| disconnected: { tone: "warning", label: t.status.disconnected }, |
| disabled: { tone: "outline", label: t.status.disabled ?? "Disabled" }, |
| fatal: { tone: "destructive", label: t.status.error }, |
| }; |
|
|
| return ( |
| <Card> |
| <CardHeader> |
| <div className="flex items-center gap-2"> |
| <Radio className="h-5 w-5 text-muted-foreground" /> |
| <CardTitle className="text-base"> |
| {t.status.connectedPlatforms} |
| </CardTitle> |
| </div> |
| </CardHeader> |
| |
| <CardContent className="grid gap-3"> |
| {platforms.map(([name, info]) => { |
| const display = platformStateBadge[info.state] ?? { |
| tone: "outline" as const, |
| label: info.state, |
| }; |
| const IconComponent = |
| info.state === "connected" |
| ? Wifi |
| : info.state === "fatal" |
| ? AlertTriangle |
| : info.state === "disabled" |
| ? PowerOff |
| : WifiOff; |
| |
| return ( |
| <div |
| key={name} |
| className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full" |
| > |
| <div className="flex items-center gap-3 min-w-0 w-full"> |
| <IconComponent |
| className={`h-4 w-4 shrink-0 ${ |
| info.state === "connected" |
| ? "text-success" |
| : info.state === "fatal" |
| ? "text-destructive" |
| : info.state === "disabled" |
| ? "text-muted-foreground" |
| : "text-warning" |
| }`} |
| /> |
| |
| <div className="flex flex-col gap-0.5 min-w-0"> |
| <span className="font-mondwest normal-case text-sm font-medium capitalize truncate"> |
| {name} |
| </span> |
| |
| {info.error_message && ( |
| <span |
| className={`font-mondwest normal-case text-xs ${ |
| info.state === "disabled" |
| ? "text-muted-foreground" |
| : "text-destructive" |
| }`} |
| > |
| {info.error_message} |
| </span> |
| )} |
| |
| {info.updated_at && ( |
| <span className="font-mondwest normal-case text-xs text-muted-foreground"> |
| {t.status.lastUpdate}: {isoTimeAgo(info.updated_at)} |
| </span> |
| )} |
| </div> |
| </div> |
| |
| <Badge |
| tone={display.tone} |
| className="shrink-0 self-start sm:self-center" |
| > |
| {display.tone === "success" && ( |
| <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" /> |
| )} |
| {display.label} |
| </Badge> |
| </div> |
| ); |
| })} |
| </CardContent> |
| </Card> |
| ); |
| } |
|
|
| interface PlatformsCardProps { |
| platforms: [string, PlatformStatus][]; |
| } |
|
|
