on df0c310 help sign in
37 lines 835 B history raw
1import React from 'react';
2import { Box, Icon } from '@tlon/indigo-react';
4import './Dropdown.scss';
6export interface DropdownProps {
7 className?: string;
8 children: React.ReactNode;
9 value: string | React.ReactNode;
10 open: boolean;
11 toggleOpen: () => void;
14const Dropdown = ({
15 children,
16 value,
17 open,
18 toggleOpen,
19 className = '',
20}: DropdownProps) => {
21 return (
22 <Box className={`dropdown ${className}`}>
23 {open && <Box className="close-background" onClick={toggleOpen} />}
24 <Box className={`selector ${open ? 'open' : ''}`} onClick={toggleOpen}>
25 {value}
26 <Icon icon="ChevronSouth" />
27 </Box>
28 {open && (
29 <Box className="content-border">
30 <Box className="dropdown-content">{children}</Box>
31 </Box>
32 )}
33 </Box>
34 );
35};
37export default Dropdown;