Фильтры

function Example() {
  const [status, setStatus] = useState('all');
  const [period, setPeriod] = useState('7d');
  const [sources, setSources] = useState([]);
  const [query, setQuery] = useState('');
  return (
    <div className="flex w-full flex-wrap items-center gap-2">
      <SearchFilter
        value={query}
        onChange={setQuery}
        placeholder="Телефон, имя или ClientID"
      />
      <SelectFilter
        icon={FilterLineIcon}
        label="Все статусы"
        defaultValue="all"
        value={status}
        onChange={setStatus}
        options={[
          { value: 'all', label: 'Все статусы' },
          { value: 'analyzed', label: 'Оценены' },
          { value: 'failed', label: 'С ошибкой' }
        ]}
      />
      <SelectFilter
        icon={CalendarLineIcon}
        value={period}
        onChange={setPeriod}
        options={[
          { value: '7d', label: '7 дней' },
          { value: '30d', label: '30 дней' }
        ]}
      />
      <MultiSelectFilter
        label="Источник"
        icon={GlobalLineIcon}
        selected={sources}
        onChange={setSources}
        options={[
          { value: 'direct', label: 'Яндекс Директ', count: 84 },
          { value: 'organic', label: 'Органика', count: 31 },
          { value: 'social', label: 'Соцсети', count: 9 }
        ]}
      />
    </div>
  );
}

render(<Example />);