hensei-web/components/SearchFilter/index.tsx

34 lines
893 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">
{props.label}
<span className="count">{props.numSelected}</span>
<span className="icon">
<ArrowIcon />
</span>
</DropdownMenu.Trigger>
<DropdownMenu.Content className="Dropdown" sideOffset={4}>
{props.children}
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Root>
);
};
export default SearchFilter;