MockClimateAlert

Painel de clima e alertas meteorológicos com previsão, condições atuais e recomendações AI.

Visão Geral

O MockClimateAlert simula um painel meteorológico completo para fazendas, com condições atuais, previsão de 5 dias, alertas ativos e recomendações geradas por AI. Específico para operações agrícolas.

Importação

import { MockClimateAlert, demoClimateAlertData } from '@/components/linear/mock-climate-alert'

Props

Prop	Tipo	Default	Descrição
`location`	`string`	—	Nome da localização
`currentTemp`	`number`	—	Temperatura atual (°C)
`humidity`	`number`	—	Umidade (%)
`windSpeed`	`number`	—	Velocidade do vento (km/h)
`forecast`	`WeatherForecast[]`	—	Previsão de 5 dias
`alerts`	`ClimateAlert[]`	—	Alertas ativos
`className`	`string`	—	Classes adicionais

WeatherForecast

interface WeatherForecast {
  day: string;        // Ex: "Seg", "Ter"
  icon: string;       // Emoji do clima
  tempMax: number;
  tempMin: number;
  rain: number;       // mm de chuva
}

ClimateAlert

interface ClimateAlert {
  id: string;
  type: 'storm' | 'frost' | 'drought' | 'heat' | 'wind';
  severity: 'high' | 'medium' | 'low';
  title: string;
  recommendation: string;
  validUntil: string;
}

Uso Básico

<MockClimateAlert
  {...demoClimateAlertData}
  className="h-[500px]"
/>

Tipos de Alerta

Type	Ícone	Label
`storm`	⛈️	Tempestade
`frost`	❄️	Geada
`drought`	☀️	Estiagem
`heat`	🌡️	Calor Extremo
`wind`	💨	Ventos Fortes

Severidades

Severity	Label	Cor
`high`	Alto	Vermelho
`medium`	Médio	Âmbar
`low`	Baixo	Azul

Features Visuais

Ícone de gota d'água
Título "Clima e Alertas"
Localização

Condições Atuais

Temperatura grande
Umidade e velocidade do vento
Fundo com gradiente azul sutil

Previsão de 5 Dias

5 cards horizontais
Dia, ícone emoji, temperaturas
Precipitação se > 0

Lista de Alertas

Cards coloridos por severidade
Ícone do tipo
Título e recomendação
Validade

Recomendação AI

Card em destaque
Sugestões baseadas na previsão

Dados de Demo

export const demoClimateAlertData = {
  location: 'Fazenda São Pedro — MT',
  currentTemp: 32,
  humidity: 65,
  windSpeed: 12,
  forecast: [
    { day: 'Seg', icon: '☀️', tempMax: 34, tempMin: 22, rain: 0 },
    { day: 'Ter', icon: '⛅', tempMax: 33, tempMin: 23, rain: 0 },
    { day: 'Qua', icon: '🌧️', tempMax: 28, tempMin: 21, rain: 15 },
    { day: 'Qui', icon: '⛈️', tempMax: 25, tempMin: 20, rain: 45 },
    { day: 'Sex', icon: '⛅', tempMax: 29, tempMin: 21, rain: 5 },
  ],
  alerts: [
    {
      id: '1',
      type: 'storm',
      severity: 'high',
      title: 'Tempestade prevista para quinta-feira',
      recommendation: 'Suspender operações de campo. Recolher equipamentos.',
      validUntil: '06/03 18:00',
    },
    // ...
  ],
}

Exemplo Customizado

import { MockClimateAlert } from '@/components/linear/mock-climate-alert'

const data = {
  location: 'Fazenda Boa Vista — GO',
  currentTemp: 28,
  humidity: 75,
  windSpeed: 8,
  forecast: [
    { day: 'Seg', icon: '⛅', tempMax: 30, tempMin: 20, rain: 0 },
    { day: 'Ter', icon: '🌧️', tempMax: 26, tempMin: 19, rain: 20 },
    { day: 'Qua', icon: '☀️', tempMax: 31, tempMin: 21, rain: 0 },
    { day: 'Qui', icon: '☀️', tempMax: 32, tempMin: 22, rain: 0 },
    { day: 'Sex', icon: '⛅', tempMax: 29, tempMin: 20, rain: 5 },
  ],
  alerts: [
    {
      id: '1',
      type: 'frost' as const,
      severity: 'medium' as const,
      title: 'Risco de geada na madrugada',
      recommendation: 'Monitorar temperatura mínima. Proteger mudas sensíveis.',
      validUntil: '08/03 08:00',
    },
  ],
}

export function Demo() {
  return <MockClimateAlert {...data} />
}

Com BentoCard

<BentoCard
  title="Monitoramento Climático"
  description="Previsão e alertas com recomendações inteligentes"
  colSpan={2}
>
  <MockClimateAlert {...demoClimateAlertData} />
</BentoCard>