Checkpoint: Release Gate

import * as React from "react";

import { Checkpoint, type CheckpointRequest, type CheckpointRule } from "@/components/ui/checkpoint";

function Glyph({ children }: { children: React.ReactNode }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {children}
    </svg>
  );
}

const rocket = (
  <Glyph>
    <path d="M12 3c3 2 4.5 5.2 4.5 9v3.5h-9V12c0-3.8 1.5-7 4.5-9z" />
    <path d="M7.5 13l-2.5 2v3.5l2.5-1.5M16.5 13l2.5 2v3.5L16.5 17M10 20h4" />
    <circle cx="12" cy="9.5" r="1.4" />
  </Glyph>
);

// Northwind's release checks. Every name, version and time is made up.
const RULES: CheckpointRule[] = [
  {
    id: "tests",
    label: "Tests",
    detail: "1,284 passing on the release commit",
    value: "CI",
    icon: (
      <Glyph>
        <path d="M9 3.5h6M10 3.5v5.2L5.2 18a1.6 1.6 0 0 0 1.4 2.5h10.8a1.6 1.6 0 0 0 1.4-2.5L14 8.7V3.5" />
        <path d="M7.6 14.5h8.8" />
      </Glyph>
    ),
  },
  {
    id: "preview",
    label: "Preview",
    detail: "Signed off on the preview URL",
    value: "Design",
    icon: (
      <Glyph>
        <path d="M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z" />
        <circle cx="12" cy="12" r="2.8" />
      </Glyph>
    ),
  },
  {
    id: "migrations",
    label: "Migrations",
    detail: "Destructive changes need a DBA",
    value: "Safe",
    icon: (
      <Glyph>
        <ellipse cx="12" cy="6" rx="7" ry="2.7" />
        <path d="M5 6v12c0 1.5 3.1 2.7 7 2.7s7-1.2 7-2.7V6M5 12c0 1.5 3.1 2.7 7 2.7s7-1.2 7-2.7" />
      </Glyph>
    ),
  },
  {
    id: "freeze",
    label: "Change freeze",
    detail: "No deploys Fri 16:00 → Mon 09:00",
    value: "Freeze",
    icon: (
      <Glyph>
        <path d="M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5L12 6.5l2.5-2M9.5 19.5L12 17.5l2.5 2" />
      </Glyph>
    ),
  },
];

const REQUESTS: CheckpointRequest[] = [
  { id: "web-2140", label: "web@2.14.0", meta: "18 commits · maya.l", icon: rocket },
  {
    id: "api-320",
    label: "api@3.2.0",
    meta: "drops column users.legacy_id",
    verdicts: { migrations: "hold" },
    icon: rocket,
  },
  {
    id: "web-2150",
    label: "web@2.15.0",
    meta: "Fri 17:42 · 41 commits · jonas.r",
    verdicts: { freeze: "block" },
    reason: "Freeze until Mon 09:00",
    icon: rocket,
  },
];

export function CheckpointDeployDemo() {
  return (
    <div className="w-full max-w-xl rounded-[26px] border border-zinc-950/[0.08] bg-white p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.04)] dark:border-white/10 dark:bg-zinc-950">
      <div className="rounded-[20px] bg-zinc-50 p-4 sm:p-5 dark:bg-white/[0.03]">
        <div className="mb-4 flex items-center justify-between gap-4 px-0.5">
          <div className="flex min-w-0 items-center gap-2">
            <span className="grid size-6 place-items-center rounded-md bg-zinc-950 text-[11px] font-semibold text-white dark:bg-white dark:text-zinc-950">
              N
            </span>
            <p className="truncate text-[13px] font-semibold tracking-tight text-zinc-950 dark:text-zinc-100">
              Release gate <span className="font-normal text-zinc-500 dark:text-zinc-400">· northwind/production</span>
            </p>
          </div>
          <span className="hidden shrink-0 rounded-full border border-zinc-950/10 px-2 py-0.5 font-mono text-[11px] text-zinc-500 sm:inline dark:border-white/15 dark:text-zinc-400">
            eu-west-1
          </span>
        </div>
        <Checkpoint
          rules={RULES}
          requests={REQUESTS}
          approver="Priya (DBA)"
          className="[--checkpoint-accent:#2f5bff] dark:[--checkpoint-accent:#6d8bff]"
        />
      </div>
    </div>
  );
}