42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import classNames from 'classnames';
|
|
|
|
// Simplest use is to define your options and map over them to product JSX and your desired onSelect; eg:
|
|
// options?.map(option => <DropdownItem onSelect={() => setDropdownItem(option.key)})}</Dropdown>
|
|
export interface DropdownItemProps {
|
|
id: string;
|
|
selected?: boolean;
|
|
onSelect?(): void;
|
|
style?: 'default' | 'outline';
|
|
children: JSX.Element | JSX.Element[] | string;
|
|
}
|
|
|
|
export const DropdownItem = (props: DropdownItemProps) => {
|
|
const { id, children, onSelect, selected = false, style = 'default' } = props;
|
|
|
|
const handleOnSelect = () => {
|
|
if (onSelect) {
|
|
onSelect();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onClick={() => handleOnSelect()}
|
|
className={classNames(
|
|
'flex items-center',
|
|
'block',
|
|
'font-roboto text-sm text-primary',
|
|
'hover:text-opacity-100 text-opacity-75',
|
|
'select-none',
|
|
'cursor-pointer',
|
|
style === 'default' &&
|
|
'border-b border-secondary font-semibold py-2 mx-3',
|
|
style === 'outline' && ['pl-4', 'pr-6', 'py-1'],
|
|
selected && 'bold text-opacity-100',
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|