Status

import { Status } from "@/components/ui/status";

const deployments = [
  { name: "website-redesign", status: "Ready", variant: "success", time: "2m ago" },
  { name: "mobile-app", status: "Building", variant: "info", time: "Just now" },
  { name: "docs", status: "Queued", variant: "neutral", time: "5m ago" },
  { name: "billing-service", status: "Degraded", variant: "warning", time: "1h ago" },
  { name: "search-index", status: "Failed", variant: "destructive", time: "3h ago" },
] as const;

export default function StatusList() {
  return (
    <div className="flex w-full max-w-md flex-col">
      {deployments.map((deployment) => (
        <div
          key={deployment.name}
          className="flex h-9 items-center gap-3 border-b border-border-muted last:border-b-0"
        >
          <span className="flex-1 truncate font-mono text-sm">{deployment.name}</span>
          <Status variant={deployment.variant} className="w-24">
            {deployment.status}
          </Status>
          <span className="w-16 text-right text-xs text-faint">{deployment.time}</span>
        </div>
      ))}
    </div>
  );
}