Multi Select Dropdown

import { MultiSelectDropdown } from '@/components/ui/multi-select-dropdown'
import { useState } from 'react'

// Basic usage (uncontrolled)
<MultiSelectDropdown />

// Controlled component
const [selected, setSelected] = useState(['design', 'frontend'])

<MultiSelectDropdown
 value={selected}
 onValueChange={(newSelected) => {
 setSelected(newSelected)
 console.log('Selected:', newSelected)
 }}
 onApply={(selectedIds) => {
 console.log('Applied:', selectedIds)
 }}
/>

// Custom options
const customOptions = [
 {
 id: 'javascript',
 label: 'JavaScript',
 color: 'bg-yellow-100 text-yellow-700'
 },
 {
 id: 'typescript',
 label: 'TypeScript',
 color: 'bg-blue-100 text-blue-700'
 },
 {
 id: 'python',
 label: 'Python',
 color: 'bg-green-100 text-green-700'
 },
]

<MultiSelectDropdown
 options={customOptions}
 defaultValue={['javascript']}
 showApplyButton={true}
 showClearButton={true}
/>