Alert

'use client';

import { Info } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function AlertDemo() {
  return (
    <Alert variant="info" className="max-w-lg">
      <Info />
      <AlertTitle>Atendimento em horário especial</AlertTitle>
      <AlertDescription>
        No feriado de 12 de outubro a clínica funciona das 8h às 12h. Agendamentos online seguem normais.
      </AlertDescription>
    </Alert>
  );
}

'use client';

import { CircleCheck, CircleX, Info, Terminal, TriangleAlert } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function AlertVariants() {
  return (
    <div className="grid w-full max-w-lg gap-4">
      <Alert>
        <Terminal />
        <AlertTitle>Padrão</AlertTitle>
        <AlertDescription>Seu site foi publicado em lojaexemplo.com.br.</AlertDescription>
      </Alert>
      <Alert variant="info">
        <Info />
        <AlertTitle>Informação</AlertTitle>
        <AlertDescription>O relatório mensal de acessos fica pronto no dia 5.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <CircleCheck />
        <AlertTitle>Sucesso</AlertTitle>
        <AlertDescription>Pagamento da fatura de setembro confirmado.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlert />
        <AlertTitle>Atenção</AlertTitle>
        <AlertDescription>O certificado SSL do domínio vence em 7 dias.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleX />
        <AlertTitle>Erro</AlertTitle>
        <AlertDescription>Não conseguimos sincronizar o estoque com a loja virtual.</AlertDescription>
      </Alert>
    </div>
  );
}

'use client';

import { TriangleAlert } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function AlertSimple() {
  return (
    <div className="grid w-full max-w-lg gap-4">
      <Alert variant="warning">
        <TriangleAlert />
        <AlertTitle>Estoque baixo: restam 3 unidades.</AlertTitle>
      </Alert>
      <Alert variant="success">
        <AlertDescription>Sem ícone e sem título: apenas a mensagem, para avisos curtos.</AlertDescription>
      </Alert>
    </div>
  );
}

'use client';

import { CircleX } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

export default function AlertFormErrors() {
  return (
    <Alert variant="destructive" className="max-w-lg">
      <CircleX />
      <AlertTitle>Não foi possível enviar o cadastro</AlertTitle>
      <AlertDescription>
        <p>Corrija os campos abaixo e tente novamente:</p>
        <ul className="list-inside list-disc text-sm">
          <li>CNPJ inválido</li>
          <li>Informe um telefone para contato</li>
          <li>Aceite os termos de uso</li>
        </ul>
      </AlertDescription>
    </Alert>
  );
}

'use client';

import { CreditCard } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';

export default function AlertWithAction() {
  return (
    <Alert variant="warning" className="max-w-lg">
      <CreditCard />
      <AlertTitle>Fatura em aberto</AlertTitle>
      <AlertDescription>
        <p>A mensalidade de hospedagem venceu em 10/09. Regularize para evitar a suspensão do site.</p>
        <Button size="sm" variant="outline" className="mt-2">
          Ver fatura
        </Button>
      </AlertDescription>
    </Alert>
  );
}