Brickslab.Tools

@brickslab./ui-webAnalytics

Dashboard filter bar with text, select, date, and tag fields, presets, and clear all.

With presets and tag field

Props

Prop	Type	Défaut	Requis	Description
`value`	`FilterState`	—	✓	Current filter state — Record<fieldId, string \| string[] \| null>.
`onChange`	`(v: FilterState) => void`	—	✓	Called on every field change.
`fields`	`FilterField[]`	—	✓	Field definitions: { id, label, type, options? }.
`presets`	`FilterPreset[]`	—	—	Quick preset buttons that apply a fixed filter state.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  value={...}
  onChange={...}
  fields={[]}
  presets={[]}
/>

valueonChangefieldspresets

Usage

tsx

import { SegmentFilterBar, type FilterState } from "@brickslab./ui-web";

const [filters, setFilters] = useState<FilterState>({});

<SegmentFilterBar
  value={filters}
  onChange={setFilters}
  fields={[
    { id: "segment", label: "Segment", type: "select", options: [...] },
    { id: "tags", label: "Tags", type: "tag", options: [...] },
  ]}
  presets={[
    { id: "mobile", label: "Mobile only", value: { tags: ["mobile"] } },
  ]}
/>