# Kanban Board Pattern

## Structure

```tsx
<div className="flex gap-4 overflow-x-auto pb-4">
  {columns.map(column => (
    <div key={column.id} className="flex-shrink-0 w-72">
      {/* Column Header */}
      <div className="flex items-center justify-between mb-3 px-2">
        <h3 className="font-medium text-[var(--text-primary)]">{column.title}</h3>
        <span className="text-xs text-[var(--text-tertiary)] bg-[var(--bg-secondary)] px-2 py-0.5 rounded-full">
          {column.items.length}
        </span>
      </div>

      {/* Column Cards */}
      <div className="space-y-2">
        {column.items.map(item => (
          <div
            key={item.id}
            className="p-3 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)] hover:border-[var(--color-accent-500)] cursor-pointer"
          >
            <p className="text-sm font-medium text-[var(--text-primary)]">{item.title}</p>
            <p className="text-xs text-[var(--text-secondary)] mt-1">{item.description}</p>
          </div>
        ))}
      </div>
    </div>
  ))}
</div>
```

## Column Status Mapping

Use CSS variables for column header colors:

| Column Status | Header Accent |
|--------------|---------------|
| To Do / Pending | `var(--info-dot)` |
| In Progress | `var(--color-accent-500)` |
| Review | `var(--warning-dot)` |
| Done | `var(--success-dot)` |
