hensei-web/components/SearchFilter/index.tsx
2022-12-26 16:50:48 -08:00

36 lines
914 B
TypeScript

import React from 'react'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import ArrowIcon from '~public/icons/Arrow.svg'
import './index.scss'
interface Props {
label: string
open: boolean
numSelected: number
onOpenChange: (open: boolean) => void
children: React.ReactNode
}
const SearchFilter = (props: Props) => {
return (
<DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
<DropdownMenu.Trigger className="DropdownLabel">
<div>
{props.label}
<span className="count">{props.numSelected}</span>
</div>
<span className="icon">
<ArrowIcon />
</span>
</DropdownMenu.Trigger>
<DropdownMenu.Content className="Dropdown" sideOffset={4}>
{props.children}
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Root>
)
}
export default SearchFilter