<SearchBar placeholder="Search components…" />

<SearchBar value="Button" onChange={(v) => console.log(v)} />

function Demo() {
  const [q, setQ] = useState('');
  const [loading, setLoading] = useState(false);
  return (
    <div className="space-y-2">
      <SearchBar value={q} onChange={(v) => { setQ(v); setLoading(true); }} />
      {loading
        ? <p className="flex items-center gap-1.5"><Spinner size="xs" /> Searching…</p>
        : q && <p>{q} — 24 results</p>}
    </div>
  );
}

function Demo() {
  const items = ['Button', 'Badge', 'Card', ...];
  const [q, setQ] = useState('');
  const filtered = q ? items.filter(n => n.toLowerCase().includes(q.toLowerCase())) : items;
  return (
    <div className="space-y-2">
      <SearchBar value={q} onChange={setQ} />
      <p className="text-xs text-text-secondary">{filtered.length} of {items.length} results</p>
      <ul>{filtered.map(name => <li key={name}>{name}</li>)}</ul>
    </div>
  );
}