Search Field

'use client';

import { SearchField } from '@/components/ui/search-field';

export default function SearchFieldDemo() {
  return (
    <SearchField
      aria-label="Buscar pedidos"
      placeholder="Buscar por cliente ou nº do pedido"
      className="w-full max-w-sm"
    />
  );
}

'use client';

import { SearchField } from '@/components/ui/search-field';

export default function SearchFieldLabel() {
  return (
    <SearchField
      label="Buscar paciente"
      placeholder="Nome, CPF ou telefone"
      description="Pressione Enter para buscar e Esc para limpar."
      className="w-full max-w-sm"
    />
  );
}

'use client';

import { useState } from 'react';
import { SearchField } from '@/components/ui/search-field';

const produtos = ['Pão francês', 'Pão integral', 'Bolo de cenoura', 'Sonho', 'Café coado', 'Pão de queijo'];

export default function SearchFieldFilter() {
  const [busca, setBusca] = useState('');
  const filtrados = produtos.filter((p) => p.toLowerCase().includes(busca.toLowerCase()));
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <SearchField aria-label="Filtrar produtos" placeholder="Filtrar produtos…" value={busca} onChange={setBusca} />
      <ul className="flex flex-col divide-y rounded-md border text-sm">
        {filtrados.length > 0 ? (
          filtrados.map((p) => (
            <li key={p} className="px-3 py-2">
              {p}
            </li>
          ))
        ) : (
          <li className="px-3 py-6 text-center text-muted-foreground">Nenhum produto encontrado.</li>
        )}
      </ul>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { SearchField } from '@/components/ui/search-field';

export default function SearchFieldSubmit() {
  const [ultimaBusca, setUltimaBusca] = useState<string | null>(null);
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <SearchField
        aria-label="Buscar no site"
        placeholder="Buscar no site…"
        onSubmit={(termo) => setUltimaBusca(termo)}
        onClear={() => setUltimaBusca(null)}
      />
      <p className="text-sm text-muted-foreground">
        {ultimaBusca ? `Buscando por “${ultimaBusca}”…` : 'Digite e pressione Enter.'}
      </p>
    </div>
  );
}

'use client';

import { SearchField } from '@/components/ui/search-field';

export default function SearchFieldDisabled() {
  return (
    <SearchField
      aria-label="Buscar notas fiscais"
      placeholder="Buscar notas fiscais"
      isDisabled
      className="w-full max-w-sm"
    />
  );
}