FilterBar

import { useState } from 'react';
import { FilterBar } from '@/components/polaris';

function Example() {
    const [search, setSearch] = useState('');
    const [filters, setFilters] = useState<Record<string, string>>({});

    return (
        <FilterBar
            searchValue={search}
            searchPlaceholder="Search orders..."
            onSearchChange={setSearch}
            filters={[
                {
                    key: 'status',
                    label: 'Status',
                    options: [
                        { label: 'Active', value: 'active' },
                        { label: 'Draft', value: 'draft' },
                        { label: 'Archived', value: 'archived' },
                    ],
                },
            ]}
            values={filters}
            onChange={(key, value) => setFilters((prev) => ({ ...prev, [key]: value ?? '' }))}
            onClear={() => setFilters({})}
        />
    );
}