FoldingFilters

import { useState } from 'react';
import { FilterSelect, FoldingFilters } from '@arbol-ai/ui';

const FoldingExample = () => {
  const [channels, setChannels] = useState<readonly string[]>([]);
  const [agents, setAgents] = useState<readonly string[]>(['front-desk']);
  return (
    <div className="flex flex-wrap items-center gap-2">
      <FoldingFilters activeCount={(channels.length > 0 ? 1 : 0) + (agents.length > 0 ? 1 : 0)}>
        <FilterSelect
          label="Channel"
          onChange={setChannels}
          options={[
            { value: 'phone', label: 'Phone' },
            { value: 'whatsapp', label: 'WhatsApp' },
          ]}
          value={channels}
        />
        <FilterSelect
          label="Agent"
          onChange={setAgents}
          options={[
            { value: 'front-desk', label: 'Front desk' },
            { value: 'reminders', label: 'Reminders' },
          ]}
          value={agents}
        />
      </FoldingFilters>
    </div>
  );
};

<FoldingExample />