Mocks
Componentes visuais para demonstrações interativas de produto. Simula interfaces reais sem lógica de backend.
Visão Geral
Os Mocks são componentes visuais projetados para demonstrações de produto no site da kodda. Eles simulam interfaces reais de sistemas e agentes AI, sem necessidade de backend ou dados reais.
Características
- Visual fidelity — Aparência idêntica a interfaces de produção
- Dados estáticos — Cada mock exporta dados de demonstração prontos para uso
- Dark mode ready — Otimizados para o tema escuro Linear-style da kodda
- Responsivos — Adaptam-se a diferentes tamanhos de tela
Categorias
Layout
Componentes de estrutura para organizar mocks em páginas.
| Componente | Descrição |
|---|---|
| BentoGrid | Grid estilo Vercel para layouts de features |
Comunicação
Mocks de interfaces de chat e mensagens.
| Componente | Descrição |
|---|---|
| MockChat | Thread Slack/Teams/Discord |
| MockWhatsApp | Conversa WhatsApp Business |
| MockCustomerChat | Chat de atendimento ao cliente |
| MockNewsletter | Visualização de newsletter |
Projeto/Kanban
Mocks de gestão de projetos e tarefas.
| Componente | Descrição |
|---|---|
| MockKanban | Board de tarefas estilo Linear |
| MockRoadmap | Timeline de roadmap |
| MockIssueView | Detalhe de issue/tarefa |
Dashboard/Analytics
Mocks de painéis e visualização de dados.
| Componente | Descrição |
|---|---|
| MockDashboard | Painel com métricas e chat AI |
| MockAlerts | Central de alertas e regras |
| MockTerminal | Terminal com comandos CLI |
Financeiro
Mocks específicos para o setor financeiro.
| Componente | Descrição |
|---|---|
| MockDueDiligence | Dossiê de due diligence |
| MockPreTrade | Análise pré-trade |
| MockCRM | Pipeline de CRM |
Agro
Mocks específicos para o setor agro.
| Componente | Descrição |
|---|---|
| MockFarmAlerts | Alertas de fazenda |
| MockHarvestPipeline | Pipeline de colheita |
| MockClimateAlert | Alertas climáticos |
Uso Básico
Todos os mocks seguem o mesmo padrão de uso:
import { MockKanban, demoColumns } from '@/components/linear/mock-kanban'
export function Demo() {
return (
<MockKanban
columns={demoColumns}
className="h-80"
/>
)
}Com Dados Customizados
import { MockKanban } from '@/components/linear/mock-kanban'
const myColumns = [
{
id: 'todo',
title: 'A Fazer',
status: 'todo',
count: 3,
cards: [
{ id: 'TASK-1', title: 'Minha tarefa', priority: 'high' }
]
}
]
export function Demo() {
return <MockKanban columns={myColumns} />
}Padrão de Arquivos
Cada mock segue esta estrutura:
web/components/linear/mock-{nome}.tsx
├── Interface Props (ex: MockKanbanProps)
├── Componente principal (ex: MockKanban)
└── Dados de demo (ex: demoColumns)Localização
Todos os mocks estão em:
web/components/linear/