Badge

'use client';

import { Badge } from '@/components/ui/badge';

export default function BadgeDemo() {
  return <Badge>Novo</Badge>;
}

'use client';

import { Badge } from '@/components/ui/badge';

export default function BadgeVariants() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge>Padrão</Badge>
      <Badge variant="secondary">Secundário</Badge>
      <Badge variant="outline">Contorno</Badge>
      <Badge variant="success">Pago</Badge>
      <Badge variant="warning">Pendente</Badge>
      <Badge variant="info">Em análise</Badge>
      <Badge variant="destructive">Cancelado</Badge>
    </div>
  );
}

'use client';

import { Badge } from '@/components/ui/badge';

export default function BadgeDot() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="outline" dot="success">
        Online
      </Badge>
      <Badge variant="outline" dot="warning">
        Em atendimento
      </Badge>
      <Badge variant="outline" dot="destructive">
        Fora do ar
      </Badge>
      <Badge variant="outline" dot="muted">
        Inativo
      </Badge>
      <Badge variant="secondary" dot>
        Rascunho
      </Badge>
    </div>
  );
}

'use client';

import { BadgeCheck, Clock, Star } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

export default function BadgeWithIcon() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="success">
        <BadgeCheck /> Verificado
      </Badge>
      <Badge variant="secondary">
        <Clock /> Entrega em 2 dias
      </Badge>
      <Badge variant="outline">
        <Star /> Mais vendido
      </Badge>
    </div>
  );
}

'use client';

import { Badge, type BadgeProps } from '@/components/ui/badge';

type Status = 'pago' | 'pendente' | 'atrasado' | 'cancelado';

// Centralize o mapeamento status → variante para manter a mesma cor em todo o sistema.
const statusBadge: Record<Status, { label: string; variant: BadgeProps['variant'] }> = {
  pago: { label: 'Pago', variant: 'success' },
  pendente: { label: 'Pendente', variant: 'warning' },
  atrasado: { label: 'Atrasado', variant: 'destructive' },
  cancelado: { label: 'Cancelado', variant: 'secondary' },
};

const faturas: { cliente: string; valor: string; status: Status }[] = [
  { cliente: 'Padaria Pão Quente', valor: 'R$ 450,00', status: 'pago' },
  { cliente: 'Ótica Visão Clara', valor: 'R$ 890,00', status: 'pendente' },
  { cliente: 'Pet Shop Amigo Fiel', valor: 'R$ 320,00', status: 'atrasado' },
  { cliente: 'Estúdio Corpo em Forma', valor: 'R$ 610,00', status: 'cancelado' },
];

export default function BadgeStatus() {
  return (
    <ul className="grid w-full max-w-md divide-y rounded-lg border text-sm">
      {faturas.map((f) => (
        <li key={f.cliente} className="flex items-center justify-between gap-4 px-4 py-3">
          <span className="font-medium">{f.cliente}</span>
          <span className="flex items-center gap-3">
            <span className="font-mono text-muted-foreground tabular-nums">{f.valor}</span>
            <Badge variant={statusBadge[f.status].variant}>{statusBadge[f.status].label}</Badge>
          </span>
        </li>
      ))}
    </ul>
  );
}