105 lines · 3.8 KB
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>