# AppSearchBar

The search / filter toolbar for management list pages: a keyword search `Input` on the left, the
active filter-tag `Popover`s in the middle, and the "Add filter" `Dropdown` trailing them — with a
fixed, never-collapsing gap so the Add-filter button stays close to the input (not at the opposite
edge) and the filter-tag text size never changes between the draft and applied states.

## Install

```
src/components/common/AppSearchBar.tsx
src/components/common/app-search-bar.css
```

Requires `antd`.

## Usage

```tsx
import AppSearchBar from '@/components/common/AppSearchBar';
import { Input, Tag, Popover, Dropdown, Button } from 'antd';
import { SearchOutlined, FilterOutlined } from '@ant-design/icons';

<AppSearchBar
  search={<Input placeholder="Search code..." prefix={<SearchOutlined />} style={{ minWidth: 280, maxWidth: 520 }} allowClear />}
  addFilter={
    <Dropdown menu={{ items: availableFilters }}>
      <Button icon={<FilterOutlined />}>Add filters</Button>
    </Dropdown>
  }
>
  {activeFilters.map((f) => (
    <Popover key={f.key} trigger="click" content={<f.editor />}>
      <Tag closable onClose={() => removeFilter(f.key)}>{f.label}: {f.value}</Tag>
    </Popover>
  ))}
</AppSearchBar>
```

## Do / Don't

- **Do** set the search input's `minWidth` / `maxWidth` on the page (the component keeps its region
  from shrinking to nothing).
- **Don't** confuse this with the Create/Delete/Refresh row — that is **AppActionBar**.
- The `.ant-tag` font-size is locked to 13px so tags don't resize when a value is applied.

Part of the **RVN Design Kit** — design-kit.raffles.com.vn