export function FilterableOptionListPreview() {
  const [selectedOptions, setSelectedOptions] = useState<number[]>(
    sampleOptions.map((item) => item.id)
  )

  return (
    <div className="border rounded-md p-4 h-[700px] flex gap-4 my-4">
      <FilterableOptionList
        options={sampleOptions}
        tagsList={sampleTagsList}
        selectedOptions={selectedOptions}
        onSelectedOptionsChange={setSelectedOptions}
      />

      <Button
        variant="ghost"
        onClick={() => setSelectedOptions([])}
        disabled={selectedOptions.length === 0}
      >
        <X className="h-4 w-4" />
      </Button>
    </div>
  )
} 
  // Sample mock data for tagsList
export const sampleTagsList = [
  { id: 1, label: "Important", color: "red" },
  { id: 2, label: "Work", color: "blue" },
  { id: 3, label: "Personal", color: "green" },
  { id: 4, label: "Urgent", color: "orange" },
];

// Sample mock data for options
export const sampleOptions = [
  {
    id: 1,
    label: "Task 1",
    tags: [1, 2],
    description: "Complete project report",
  },
  { id: 2, label: "Task 2", tags: [2, 3], description: "Schedule team meeting" },
  { id: 3, label: "Task 3", tags: [3, 4], description: "Prepare presentation" },
  { id: 4, label: "Task 4", tags: [3], description: "Buy groceries" },
  { id: 5, label: "Task 5", tags: [4], description: "Submit expense report" },
];
Filterable Option List

Installation

CLI

Usage
