Separator

'use client';

import { Separator } from '@/components/ui/separator';

export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-1">
        <h4 className="font-heading text-sm font-semibold">Andrade &amp; Lima Contabilidade</h4>
        <p className="text-sm text-muted-foreground">Contabilidade para pequenas empresas desde 2004.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <span>Serviços</span>
        <Separator orientation="vertical" />
        <span>Equipe</span>
        <Separator orientation="vertical" />
        <span>Contato</span>
      </div>
    </div>
  );
}

'use client';

import { Bell, Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';

export default function SeparatorVertical() {
  return (
    <div className="flex h-9 items-center gap-2 rounded-lg border px-2">
      <Button variant="ghost" size="icon-sm" aria-label="Notificações">
        <Bell />
      </Button>
      <Separator orientation="vertical" className="my-2" />
      <Button size="sm" variant="ghost">
        <Plus /> Novo pedido
      </Button>
    </div>
  );
}

'use client';

import { Fragment } from 'react';
import { Separator } from '@/components/ui/separator';

const horarios = [
  { dia: 'Segunda a sexta', hora: '08h às 19h' },
  { dia: 'Sábado', hora: '08h às 13h' },
  { dia: 'Domingo e feriados', hora: 'Fechado' },
];

export default function SeparatorList() {
  return (
    <div className="w-full max-w-xs rounded-lg border p-4 text-sm">
      <p className="mb-3 font-medium">Horário de atendimento</p>
      {horarios.map((h, i) => (
        <Fragment key={h.dia}>
          {i > 0 && <Separator className="my-2" />}
          <div className="flex justify-between">
            <span className="text-muted-foreground">{h.dia}</span>
            <span>{h.hora}</span>
          </div>
        </Fragment>
      ))}
    </div>
  );
}