{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "deployments-table",
  "title": "Deployments Table",
  "description": "CI deploys with commit messages, mono shas, environment badges, build status and author avatars.",
  "registryDependencies": [
    "@spectrumui/data-table"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/tables/deployments-table.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table';\n\ntype Status = 'ready' | 'building' | 'failed';\n\ninterface Deployment {\n  id: string;\n  message: string;\n  sha: string;\n  env: 'Production' | 'Preview';\n  status: Status;\n  branch: string;\n  duration: string;\n  age: string;\n  author: string;\n  avatar: string;\n}\n\nconst DEPLOYMENTS: Deployment[] = [\n  {\n    id: 'd1',\n    message: 'fix: debounce search input on the audit view',\n    sha: 'a41f20c',\n    env: 'Production',\n    status: 'ready',\n    branch: 'main',\n    duration: '42s',\n    age: '6m',\n    author: 'Freya',\n    avatar: '/avatars/people/01.jpg',\n  },\n  {\n    id: 'd2',\n    message: 'feat: nightly usage rollups',\n    sha: '8c92be1',\n    env: 'Preview',\n    status: 'building',\n    branch: 'feat/rollups',\n    duration: '—',\n    age: '11m',\n    author: 'Mateo',\n    avatar: '/avatars/people/03.jpg',\n  },\n  {\n    id: 'd3',\n    message: 'chore: bump motion to 12.24',\n    sha: 'f03d777',\n    env: 'Preview',\n    status: 'ready',\n    branch: 'chore/deps',\n    duration: '38s',\n    age: '54m',\n    author: 'Aiko',\n    avatar: '/avatars/people/06.jpg',\n  },\n  {\n    id: 'd4',\n    message: 'feat: SSO domain enforcement',\n    sha: '2b6a90d',\n    env: 'Preview',\n    status: 'failed',\n    branch: 'feat/sso-enforce',\n    duration: '1m 12s',\n    age: '2h',\n    author: 'Jonas',\n    avatar: '/avatars/people/09.jpg',\n  },\n  {\n    id: 'd5',\n    message: 'fix: hydrate locale before first paint',\n    sha: 'c7e5514',\n    env: 'Production',\n    status: 'ready',\n    branch: 'main',\n    duration: '45s',\n    age: '5h',\n    author: 'Zara',\n    avatar: '/avatars/people/12.jpg',\n  },\n  {\n    id: 'd6',\n    message: 'docs: webhook retry policy',\n    sha: '90aa3f2',\n    env: 'Preview',\n    status: 'ready',\n    branch: 'docs/webhooks',\n    duration: '31s',\n    age: '8h',\n    author: 'Nils',\n    avatar: '/avatars/people/13.jpg',\n  },\n];\n\nconst STATUS_META: Record<Status, { label: string; className: string }> = {\n  ready: { label: 'Ready', className: 'text-emerald-700 dark:text-emerald-300' },\n  building: { label: 'Building', className: 'text-amber-700 dark:text-amber-300' },\n  failed: { label: 'Failed', className: 'text-rose-700 dark:text-rose-300' },\n};\n\nconst columns: DataTableColumn<Deployment>[] = [\n  {\n    id: 'message',\n    header: 'Deployment',\n    sortable: true,\n    value: (row) => row.message,\n    cell: (row) => (\n      <span className=\"block min-w-0 max-w-72\">\n        <span className=\"block truncate\">{row.message}</span>\n        <span className=\"block font-mono text-xs font-normal text-neutral-500 dark:text-neutral-400\">\n          {row.sha}\n        </span>\n      </span>\n    ),\n  },\n  {\n    id: 'status',\n    header: 'Status',\n    sortable: true,\n    value: (row) => row.status,\n    cell: (row) => (\n      <span\n        className={`inline-flex items-center gap-1.5 font-medium ${STATUS_META[row.status].className}`}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={`size-1.5 rounded-full bg-current ${row.status === 'building' ? 'animate-pulse motion-reduce:animate-none' : ''}`}\n        />\n        {STATUS_META[row.status].label}\n      </span>\n    ),\n  },\n  {\n    id: 'env',\n    header: 'Environment',\n    sortable: true,\n    hideBelow: 'sm',\n    value: (row) => row.env,\n    cell: (row) => (\n      <span className=\"inline-flex rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-medium text-neutral-700 ring-1 ring-inset ring-neutral-500/15 dark:bg-neutral-100/10 dark:text-neutral-300 dark:ring-white/15\">\n        {row.env}\n      </span>\n    ),\n  },\n  {\n    id: 'branch',\n    header: 'Branch',\n    hideBelow: 'lg',\n    value: (row) => row.branch,\n    cell: (row) => <span className=\"font-mono text-xs\">{row.branch}</span>,\n  },\n  {\n    id: 'duration',\n    header: 'Duration',\n    numeric: true,\n    hideBelow: 'md',\n    value: (row) => row.duration,\n  },\n  {\n    id: 'age',\n    header: 'Age',\n    numeric: true,\n    value: (row) => row.age,\n    cell: (row) => (\n      <span className=\"flex items-center justify-end gap-2\">\n        <span className=\"tabular-nums\">{row.age}</span>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={row.avatar}\n          alt={`Deployed by ${row.author}`}\n          loading=\"lazy\"\n          width={20}\n          height={20}\n          className=\"size-5 shrink-0 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10\"\n        />\n      </span>\n    ),\n  },\n];\n\nexport function DeploymentsTable({\n  variant = 'Comfortable',\n}: {\n  variant?: 'Comfortable' | 'Compact';\n}) {\n  return (\n    <div className=\"mx-auto w-full max-w-4xl px-4 py-10 sm:px-6\">\n      <DataTable\n        data={DEPLOYMENTS}\n        columns={columns}\n        rowId={(row) => row.id}\n        rowLabel={(row) => `deployment ${row.sha}`}\n        caption=\"Recent deployments with build status, environment and age.\"\n        density={variant === 'Compact' ? 'compact' : 'default'}\n        title=\"Deployments\"\n        quickFilter={{\n          columnId: 'env',\n          label: 'Filter by environment',\n          getValue: (row) => row.env,\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/tables/deployments-table.tsx"
    }
  ],
  "type": "registry:block"
}