import { Fragment } from 'react' import { ChevronDownIcon } from '@heroicons/react/solid' import { useTranslation } from 'next-i18next' import { Popover, Transition } from '@headlessui/react' import Checkbox from './Checkbox' const MultiSelectDropdown = ({ options, selected, toggleOption }) => { const { t } = useTranslation('common') return ( {({ open }) => (
{selected.length === 1 ? selected[0] : t('filters-selected', { selectedFilters: selected.length })}
{options.map((option) => { const name = option.name ? option.name : option const isSelected = selected.includes(name) return ( toggleOption(option.name ? { id: option.name } : option) } > {name} ) })}
)}
) } export default MultiSelectDropdown