Switch

'use client';

import { Switch } from '@/components/ui/switch';

export default function SwitchDemo() {
  return <Switch defaultSelected>Loja aberta para pedidos</Switch>;
}

'use client';

import { Switch } from '@/components/ui/switch';

export default function SwitchDescription() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5 rounded-lg border p-4">
      <Switch defaultSelected description="Avisamos quando um novo agendamento chegar.">
        Notificações por WhatsApp
      </Switch>
      <Switch description="Resumo semanal de atendimentos toda segunda-feira.">Relatório por e-mail</Switch>
      <Switch defaultSelected description="Pacientes podem marcar consultas pelo site.">
        Agendamento online
      </Switch>
    </div>
  );
}

'use client';

import { Switch } from '@/components/ui/switch';

export default function SwitchDisabled() {
  return (
    <div className="flex flex-col gap-4">
      <Switch isDisabled>Integração com iFood (em breve)</Switch>
      <Switch isDisabled defaultSelected>
        Certificado SSL (sempre ativo)
      </Switch>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Switch } from '@/components/ui/switch';

export default function SwitchControlled() {
  const [aberta, setAberta] = useState(true);
  return (
    <div className="flex flex-col items-start gap-3">
      <Switch isSelected={aberta} onChange={setAberta}>
        Aceitar pedidos pelo site
      </Switch>
      <p className="text-sm text-muted-foreground">
        {aberta ? 'Clientes podem fazer pedidos agora.' : 'O site mostra “Fechado no momento”.'}
      </p>
    </div>
  );
}