Board view / Manage my queue

import {
  KanbanBoard,
  type KanbanBoardProps,
  type KanbanColumn,
  type KanbanCard,
  type KanbanStatus,
  type KanbanTone,
} from "@/components/blocks/kanban-board-showcase";

"use client";

import * as React from "react";
import {
  KanbanBoard,
  type KanbanCard,
  type KanbanColumn,
} from "@/components/blocks/kanban-board-showcase";

const COLUMNS: KanbanColumn[] = [
  { id: "queued", title: "Queued", tone: "muted", showHandle: true },
  { id: "active", title: "Active", tone: "emerald", cap: 7, disableDnd: true, showPlayPause: true },
];

const INITIAL_CARDS: Record<string, KanbanCard[]> = {
  queued: [
    { id: "c1", title: "Stewardship brief", status: { label: "Open", tone: "muted" } },
    { id: "c2", title: "Outreach video",    status: { label: "Open", tone: "muted" } },
  ],
  active: [
    { id: "c5", title: "Easter graphics",     status: { label: "Active", tone: "brand" } },
    { id: "c7", title: "Annual report cover", status: { label: "Active", tone: "brand" } },
  ],
};

export function Example() {
  const [cards, setCards] = React.useState(INITIAL_CARDS);
  return <KanbanBoard columns={COLUMNS} cards={cards} onChange={setCards} />;
}

KanbanBoard
├── KanbanColumn[] (props.columns — id, title, tone, cap, showHandle, disableDnd, showPlayPause)
└── Cards record (props.cards — Record<columnId, KanbanCard[]>)
    └── KanbanCard
        ├── title / description
        ├── status: { label, tone }
        ├── assignee: { name, initials }
        └── paused (only meaningful in showPlayPause columns — flips Pause ↔ Play)

Drag rules
├── Reordering is allowed within a column.
└── Cross-column moves are blocked — cards never leave their source column.