MockAlerts

Central de alertas com lista de notificações e painel de regras ativas. Suporta tipos crítico, warning, info e success.

Visão Geral

O MockAlerts simula uma central de alertas empresarial, com lista de notificações coloridas por severidade e painel lateral de regras de monitoramento. Ideal para demonstrar agentes de alertas e automação.

Importação

import { MockAlerts, demoAlertsData } from '@/components/linear/mock-alerts'

Props

Prop	Tipo	Default	Descrição
`title`	`string`	`'Central de Alertas'`	Título do painel
`alerts`	`Alert[]`	—	Lista de alertas
`rules`	`AlertRule[]`	`[]`	Regras ativas (painel lateral)
`className`	`string`	—	Classes adicionais

Alert

interface Alert {
  id: string;
  type: 'critical' | 'warning' | 'info' | 'success';
  title: string;
  description: string;
  time: string;
  source?: string;
  resolved?: boolean;
  action?: string;
}

AlertRule

interface AlertRule {
  id: string;
  name: string;
  condition: string;
  active: boolean;
  triggers: number;
}

Uso Básico

<MockAlerts
  {...demoAlertsData}
  className="h-96"
/>

Dados de Demo

export const demoAlertsData = {
  alerts: [
    {
      id: '1',
      type: 'critical',
      title: 'Estoque crítico — SKU 4521',
      description: 'Heineken 350ml abaixo do mínimo.',
      time: '5 min',
      source: 'Estoque',
      action: 'Gerar pedido',
    },
    {
      id: '2',
      type: 'warning',
      title: 'Meta de vendas em risco',
      description: 'Loja Centro -15% da meta diária.',
      time: '12 min',
      source: 'BI',
      action: 'Ver detalhes',
    },
    // ...
  ],
  rules: [
    {
      id: '1',
      name: 'Estoque Mínimo',
      condition: 'Estoque < 20%',
      active: true,
      triggers: 47,
    },
    // ...
  ],
}

Tipos de Alerta

Cada tipo tem cores e ícones distintos:

Tipo	Cor	Ícone	Uso
`critical`	Vermelho	Círculo com !	Ação urgente necessária
`warning`	Âmbar	Triângulo	Atenção requerida
`info`	Azul	Círculo com i	Informativo
`success`	Verde	Círculo com check	Ação concluída

Features Visuais

Contadores de Severidade

O header mostra contadores:

Badge vermelho: X críticos
Badge âmbar: Y avisos

Alertas Resolvidos

Alertas com resolved: true:

Opacidade reduzida (50%)
Badge "Resolvido" verde
Botão de ação oculto

Botões de Ação

Alertas podem ter ação clicável:

{
  type: 'critical',
  title: 'Estoque crítico',
  action: 'Gerar pedido',  // Texto do botão
}

Painel de Regras

Exibido apenas em desktop (md+). Mostra:

Nome da regra
Condição de disparo
Indicador ativo/inativo
Contador de disparos do mês

Exemplo Customizado

import { MockAlerts } from '@/components/linear/mock-alerts'

const data = {
  alerts: [
    {
      id: '1',
      type: 'critical' as const,
      title: 'Servidor offline',
      description: 'API principal não responde há 5 minutos.',
      time: '2 min',
      source: 'Monitoramento',
      action: 'Ver logs',
    },
    {
      id: '2',
      type: 'success' as const,
      title: 'Deploy concluído',
      description: 'v2.3.1 em produção.',
      time: '15 min',
      resolved: true,
    },
  ],
  rules: [
    {
      id: '1',
      name: 'Health Check',
      condition: 'Response time > 2s',
      active: true,
      triggers: 12,
    },
  ],
}

export function Demo() {
  return <MockAlerts {...data} className="h-80" />
}

Com BentoCard

<BentoCard
  title="Central de Alertas"
  description="Monitoramento proativo com regras customizáveis"
  colSpan={2}
>
  <MockAlerts {...demoAlertsData} />
</BentoCard>

On this page