MockKanban

Board de tarefas estilo Linear com colunas de status, prioridades e labels. Perfeito para demos de gestão.

Visão Geral

O MockKanban simula um board de tarefas no estilo Linear, com ícones de status, prioridades visuais, labels coloridas e indicador de branch Git. Ideal para demonstrar agentes de gestão de tarefas.

Importação

import { MockKanban, demoColumns } from '@/components/linear/mock-kanban'

Props

Prop	Tipo	Default	Descrição
`columns`	`KanbanColumn[]`	—	Colunas do board
`compact`	`boolean`	`false`	Modo compacto
`className`	`string`	—	Classes adicionais

KanbanColumn

interface KanbanColumn {
  id: string;
  title: string;
  status: 'backlog' | 'todo' | 'in_progress' | 'done';
  count: number;
  cards: KanbanCard[];
}

KanbanCard

interface KanbanCard {
  id: string;
  title: string;
  labels?: { text: string; color: string }[];
  priority?: 'urgent' | 'high' | 'medium' | 'low';
  assignee?: string;
  hasGitBranch?: boolean;
}

Uso Básico

<MockKanban
  columns={demoColumns}
  className="h-80"
/>

Dados de Demo

export const demoColumns: KanbanColumn[] = [
  {
    id: 'backlog',
    title: 'Sugestões IA',
    status: 'backlog',
    count: 5,
    cards: [
      {
        id: 'PED-089',
        title: 'Pedido auto: Água Mineral (120 cx)',
        priority: 'medium',
        labels: [{ text: 'Compras', color: '#30A46C' }],
      },
    ],
  },
  {
    id: 'todo',
    title: 'Aguardando',
    status: 'todo',
    count: 3,
    cards: [
      {
        id: 'REC-847',
        title: 'Resolver divergência Ambev (23 cx)',
        priority: 'high',
        labels: [
          { text: 'Recebimento', color: '#E5484D' },
          { text: 'Fornecedor', color: '#F5A623' },
        ],
      },
    ],
  },
  // ...
]

Features Visuais

Ícones de Status

Cada status tem um ícone distinto:

backlog — Círculo tracejado
todo — Círculo vazio
in_progress — Círculo amarelo com ponteiros de relógio
done — Círculo verde com check

Prioridades

Ícones coloridos indicam urgência:

urgent — Triângulo vermelho
high — Barras laranja (3 barras)
medium — Barras amarelas (2 barras)
low — Barras cinza (1 barra)

Labels

Labels coloridas com fundo semi-transparente:

labels: [
  { text: 'Bug', color: '#E5484D' },
  { text: 'Feature', color: '#3E63DD' },
]

Branch Git

Cards podem mostrar indicador de branch:

{
  id: 'TASK-123',
  title: 'Implementar feature',
  hasGitBranch: true,  // Mostra ícone de branch
}

Modo Compacto

Use compact={true} para boards menores:

<MockKanban
  columns={demoColumns}
  compact  // Colunas e cards menores
  className="h-64"
/>

Diferenças no modo compacto:

Colunas: w-40 sm:w-48 (vs w-52 sm:w-64)
Max height: max-h-48 (vs max-h-64)
Títulos: text-xs (vs text-sm)

Exemplo Customizado

import { MockKanban } from '@/components/linear/mock-kanban'

const myColumns = [
  {
    id: 'ideas',
    title: 'Ideias',
    status: 'backlog' as const,
    count: 2,
    cards: [
      {
        id: 'FEAT-001',
        title: 'Integração com Slack',
        priority: 'medium' as const,
        labels: [{ text: 'Integração', color: '#9333ea' }],
      },
    ],
  },
  {
    id: 'doing',
    title: 'Em Progresso',
    status: 'in_progress' as const,
    count: 1,
    cards: [
      {
        id: 'FEAT-002',
        title: 'Dashboard de métricas',
        priority: 'high' as const,
        hasGitBranch: true,
      },
    ],
  },
]

export function Demo() {
  return <MockKanban columns={myColumns} />
}

Com BentoCard

<BentoCard
  title="Gestão de Tarefas"
  description="Board inteligente com sugestões de AI"
  number="FIG 0.2"
  colSpan={2}
>
  <MockKanban columns={demoColumns} compact />
</BentoCard>

On this page