{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "deployment-list",
  "title": "Deployment List",
  "description": "An operational deployment list with status, row actions, pagination, and destructive confirmation.",
  "registryDependencies": [
    "@rivetui/alert-dialog",
    "@rivetui/button",
    "@rivetui/data-list",
    "@rivetui/dropdown-menu",
    "@rivetui/pagination",
    "@rivetui/status"
  ],
  "files": [
    {
      "path": "registry/rivetui/blocks/deployment-list/deployment-list.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/rivetui/components/alert-dialog/alert-dialog\";\nimport { Button } from \"@/registry/rivetui/components/button/button\";\nimport {\n  DataList,\n  DataListItem,\n  DataListLabel,\n  DataListValue,\n} from \"@/registry/rivetui/components/data-list/data-list\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/rivetui/components/dropdown-menu/dropdown-menu\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/rivetui/components/pagination/pagination\";\nimport { Status } from \"@/registry/rivetui/components/status/status\";\n\ntype DeploymentState = \"building\" | \"degraded\" | \"ready\";\n\ntype Deployment = {\n  id: string;\n  name: string;\n  branch: string;\n  region: string;\n  updatedAt: string;\n  state: DeploymentState;\n};\n\ntype DeploymentListProps = React.ComponentProps<\"section\"> & {\n  deployments?: readonly Deployment[];\n  onDelete?: (deployment: Deployment) => void;\n  onInspect?: (deployment: Deployment) => void;\n  onRedeploy?: (deployment: Deployment) => void;\n};\n\nconst exampleDeployments: readonly Deployment[] = [\n  {\n    id: \"dpl_9x31\",\n    name: \"api-gateway\",\n    branch: \"main\",\n    region: \"fra1\",\n    updatedAt: \"2 min ago\",\n    state: \"ready\",\n  },\n  {\n    id: \"dpl_7n14\",\n    name: \"event-worker\",\n    branch: \"release/42\",\n    region: \"lhr1\",\n    updatedAt: \"8 min ago\",\n    state: \"building\",\n  },\n  {\n    id: \"dpl_4p82\",\n    name: \"admin-console\",\n    branch: \"main\",\n    region: \"iad1\",\n    updatedAt: \"21 min ago\",\n    state: \"degraded\",\n  },\n];\n\nconst statusTone = {\n  ready: \"success\",\n  building: \"neutral\",\n  degraded: \"warning\",\n} as const;\n\nfunction DeploymentList({\n  className,\n  deployments = exampleDeployments,\n  onDelete,\n  onInspect,\n  onRedeploy,\n  ...props\n}: DeploymentListProps) {\n  return (\n    <section\n      aria-labelledby=\"deployment-list-title\"\n      className={cn(\"w-full max-w-5xl border border-border bg-background\", className)}\n      {...props}\n    >\n      <header className=\"flex flex-col gap-4 border-b border-border p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6\">\n        <div>\n          <p className=\"font-mono text-[0.625rem] uppercase tracking-[0.14em] text-muted-foreground\">\n            Production / Deployments\n          </p>\n          <h2 id=\"deployment-list-title\" className=\"mt-2 text-xl font-semibold tracking-[-0.035em]\">\n            Recent deployments\n          </h2>\n        </div>\n        <Button type=\"button\" size=\"sm\">\n          Create deployment\n        </Button>\n      </header>\n\n      <ul className=\"divide-y divide-border\" aria-label=\"Deployments\">\n        {deployments.map((deployment) => (\n          <li\n            key={deployment.id}\n            className=\"grid min-w-0 gap-4 p-4 sm:p-5 lg:grid-cols-[minmax(0,1fr)_minmax(16rem,0.8fr)_auto] lg:items-center\"\n          >\n            <div className=\"min-w-0\">\n              <div className=\"flex flex-wrap items-center gap-x-3 gap-y-2\">\n                <h3 className=\"truncate text-sm font-semibold\">{deployment.name}</h3>\n                <Status tone={statusTone[deployment.state]} className=\"text-xs capitalize\">\n                  {deployment.state}\n                </Status>\n              </div>\n              <p className=\"mt-1 truncate font-mono text-[0.6875rem] text-muted-foreground\">\n                {deployment.id} · {deployment.branch}\n              </p>\n            </div>\n\n            <DataList\n              orientation=\"horizontal\"\n              size=\"sm\"\n              className=\"grid-cols-2 border-0 sm:grid-cols-2 [&>[data-slot=data-list-item]]:border-0 [&>[data-slot=data-list-item]]:p-0\"\n            >\n              <DataListItem>\n                <DataListLabel>Region</DataListLabel>\n                <DataListValue className=\"font-mono\">{deployment.region}</DataListValue>\n              </DataListItem>\n              <DataListItem>\n                <DataListLabel>Updated</DataListLabel>\n                <DataListValue>{deployment.updatedAt}</DataListValue>\n              </DataListItem>\n            </DataList>\n\n            <DropdownMenu>\n              <DropdownMenuTrigger render={<Button type=\"button\" variant=\"outline\" size=\"sm\" />}>\n                Actions\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>{deployment.name}</DropdownMenuLabel>\n                  <DropdownMenuItem onClick={() => onInspect?.(deployment)}>\n                    Inspect\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => onRedeploy?.(deployment)}>\n                    Redeploy\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <AlertDialog>\n                  <AlertDialogTrigger\n                    render={<DropdownMenuItem destructive closeOnClick={false} />}\n                  >\n                    Delete deployment\n                  </AlertDialogTrigger>\n                  <AlertDialogContent>\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>Delete {deployment.name}?</AlertDialogTitle>\n                      <AlertDialogDescription>\n                        This removes the deployment record and its generated artifacts. This action\n                        cannot be undone.\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel render={<Button variant=\"outline\" />}>\n                        Cancel\n                      </AlertDialogCancel>\n                      <AlertDialogAction\n                        render={<Button variant=\"destructive\" />}\n                        onClick={() => onDelete?.(deployment)}\n                      >\n                        Delete deployment\n                      </AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </li>\n        ))}\n      </ul>\n\n      <footer className=\"border-t border-border px-3 py-3\">\n        <Pagination aria-label=\"Deployment pages\">\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious aria-disabled=\"true\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\" isActive aria-label=\"Page 1\">\n                1\n              </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationLink href=\"#\" aria-label=\"Page 2\">\n                2\n              </PaginationLink>\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </footer>\n    </section>\n  );\n}\n\nexport type { Deployment, DeploymentListProps, DeploymentState };\nexport { DeploymentList, exampleDeployments };\n",
      "type": "registry:component",
      "target": "components/blocks/deployment-list.tsx"
    }
  ],
  "categories": [
    "dashboard",
    "data"
  ],
  "type": "registry:block"
}