import { deployPages, removePagesPreview, rollbackPages } from "~/fns/pages";
import { useAction } from "~/hooks/use-action";
import { Badge, EmptyState, formatBytes, Panel, RelativeTime } from "~/components/ui/Primitives";
import { Button } from "~/components/ui/Button";
import { ErrorBanner } from "~/components/ui/Field";
import type { PagesData } from "./PagesSettings";
type RepoParams = { owner: string; repo: string };
type Deployment = PagesData["deployments"][number];
const STATUS_TONES = {
queued: "neutral",
building: "amber",
active: "green",
failed: "red",
superseded: "neutral",
} as const;
function DeploymentRow({
deployment,
activeId,
onRollback,
onRemovePreview,
}: {
deployment: Deployment;
activeId: string | null;
onRollback: (id: string) => void;
onRemovePreview: (prNumber: number) => void;
}) {
const live = deployment.status === "active";
const prNumber = deployment.prNumber;
return (
<li className="flex flex-wrap items-center gap-3 px-4 py-2.5 text-sm">
<Badge tone={STATUS_TONES[deployment.status]}>{deployment.status}</Badge>
<span className="text-gray-200">
{deployment.environment === "preview" ? `Preview #${deployment.prNumber}` : "Production"}
</span>
<code className="font-mono text-xs text-gray-500">
{deployment.ref}@{deployment.sha.slice(0, 7)}
</code>