Filters

import { Calendar, SearchLg } from "@untitledui/icons"; import { Button } from "@/components/base/buttons/button"; import { FilterBar } from "@/components/application/filter-bar/filter-bar"; import { FilterDropdown } from "@/components/application/filter-bar/filter-dropdown-menu"; <FilterBar.Root> <FilterBar.Content> <Button size="sm" color="secondary" iconLeading={Calendar}> Last 30 days </Button> </FilterBar.Content> <FilterBar.Actions> <FilterBar.FilterIconButton icon={SearchLg} label="Search orders" /> <FilterDropdown filters={filters} appliedCount={3} onApply={(next) => setApplied(next.length)} onAddFilter={addRow} onRemoveFilter={removeRow} onFilterChange={patchRow} onClearAll={clearAll} renderFilterRow={(filter, onChange) => ( <FieldOperatorValueInputs filter={filter} onChange={onChange} /> )} /> </FilterBar.Actions> </FilterBar.Root>