FilterBar

import * as React from 'react';
import { Button, FilterBar, FilterChip } from '@bindshq/stance-react';

const users = [
  { name: 'Amara Okafor', department: 'Sales' },
  { name: 'Lukas Novak', department: 'Engineering' },
  { name: 'Priya Raman', department: 'Legal' },
  { name: 'Hana Sato', department: 'Sales' },
  { name: 'Oliver Grant', department: 'Finance' },
];

export function Basic() {
  const [query, setQuery] = React.useState('');
  const [department, setDepartment] = React.useState<string | null>(null);
  const results = users.filter(
    (u) =>
      u.name.toLowerCase().includes(query.toLowerCase()) &&
      (!department || u.department === department),
  );
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <FilterBar
        search={{
          value: query,
          onChange: setQuery,
          label: 'Search users',
          placeholder: 'Search by name',
        }}
        resultCount={results.length}
        onClearAll={() => {
          setQuery('');
          setDepartment(null);
        }}
        canClear={Boolean(query || department)}
      >
        <FilterChip
          label="Department"
          value={department ?? undefined}
          onClear={() => setDepartment(null)}
        >
          <div role="group" aria-label="Departments" style={{ display: 'grid', gap: 4 }}>
            {['Sales', 'Engineering', 'Legal', 'Finance'].map((d) => (
              <Button
                key={d}
                size="sm"
                variant={department === d ? 'primary' : 'ghost'}
                onClick={() => setDepartment(d)}
              >
                {d}
              </Button>
            ))}
          </div>
        </FilterChip>
      </FilterBar>
      <ul style={{ margin: 0, paddingLeft: 20 }}>
        {results.map((u) => (
          <li key={u.name}>
            {u.name} · {u.department}
          </li>
        ))}
      </ul>
    </div>
  );
}

import * as React from 'react';
import { Button, FilterBar, FilterChip, Icon } from '@bindshq/stance-react';

export function WithActions() {
  const [q, setQ] = React.useState('');
  return (
    <FilterBar
      search={{ value: q, onChange: setQ, label: 'Search templates' }}
      resultCount={24}
      formatResultCount={(n) => `${n} templates`}
      actions={
        <Button size="sm" variant="outline" leadingIcon={<Icon name="arrows-up-down" />}>
          Sort
        </Button>
      }
    >
      <FilterChip label="Owner" />
      <FilterChip label="Updated" value="This month" onClear={() => {}} />
    </FilterBar>
  );
}

import * as React from 'react';
import { FilterBar } from '@bindshq/stance-react';

export function SearchOnly() {
  const [q, setQ] = React.useState('');
  return (
    <FilterBar
      search={{
        value: q,
        onChange: setQ,
        label: 'Search contracts',
        placeholder: 'Contract or counterparty',
      }}
    />
  );
}