Progress

'use client';

import { useEffect, useState } from 'react';
import { Progress } from '@/components/ui/progress';

export default function ProgressDemo() {
  const [value, setValue] = useState(13);

  useEffect(() => {
    const timer = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 7)), 800);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="w-full max-w-sm">
      <Progress label="Enviando fotos do cardápio" value={Math.min(value, 100)} />
    </div>
  );
}

'use client';

import { Progress } from '@/components/ui/progress';

export default function ProgressIndeterminate() {
  return (
    <div className="w-full max-w-sm">
      <Progress label="Gerando relatório de vendas…" isIndeterminate />
    </div>
  );
}

'use client';

import { Progress } from '@/components/ui/progress';

export default function ProgressVariants() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <Progress label="Padrão" value={40} />
      <Progress label="Cadastro concluído" value={100} variant="success" />
      <Progress label="Importação de clientes" value={65} variant="info" />
      <Progress label="Espaço de backup" value={82} variant="warning" />
      <Progress label="Sincronização com falhas" value={30} variant="destructive" />
    </div>
  );
}

'use client';

import { Progress } from '@/components/ui/progress';

export default function ProgressSizes() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <Progress aria-label="Progresso pequeno" size="sm" value={30} />
      <Progress aria-label="Progresso padrão" value={55} />
      <Progress aria-label="Progresso grande" size="lg" value={80} />
      <Progress
        label="Etapa 2 de 4"
        minValue={0}
        maxValue={4}
        value={2}
        valueLabel="Dados da empresa"
      />
    </div>
  );
}

'use client';

import { Meter } from '@/components/ui/progress';

export default function ProgressMeter() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <Meter
        label="Armazenamento de fotos"
        value={3.2}
        maxValue={10}
        valueLabel="3,2 GB de 10 GB"
      />
      <Meter
        label="Meta de vendas de setembro"
        value={18400}
        maxValue={25000}
        formatOptions={{ style: 'currency', currency: 'BRL', maximumFractionDigits: 0 }}
        variant="info"
      />
    </div>
  );
}

'use client';

import { Meter } from '@/components/ui/progress';

export default function ProgressMeterAuto() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <Meter label="E-mails enviados no mês" value={45} variant="auto" />
      <Meter label="Usuários do plano" value={8} maxValue={10} variant="auto" />
      <Meter label="Cota de disparos de WhatsApp" value={96} variant="auto" />
    </div>
  );
}