2021-11-16 12:33:01 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
|
2022-07-27 13:04:31 +00:00
|
|
|
import { Icon } from '@/react/components/Icon';
|
|
|
|
|
2021-11-16 12:33:01 +00:00
|
|
|
import styles from './AddButton.module.css';
|
|
|
|
|
|
|
|
export interface Props {
|
2021-11-22 16:13:40 +00:00
|
|
|
className?: string;
|
2021-11-16 12:33:01 +00:00
|
|
|
label: string;
|
2022-07-26 19:44:08 +00:00
|
|
|
disabled?: boolean;
|
2021-11-16 12:33:01 +00:00
|
|
|
onClick: () => void;
|
|
|
|
}
|
|
|
|
|
2022-07-26 19:44:08 +00:00
|
|
|
export function AddButton({ label, onClick, className, disabled }: Props) {
|
2021-11-16 12:33:01 +00:00
|
|
|
return (
|
|
|
|
<button
|
|
|
|
className={clsx(
|
2021-11-22 16:13:40 +00:00
|
|
|
className,
|
2021-11-16 12:33:01 +00:00
|
|
|
'label',
|
|
|
|
'label-default',
|
2022-08-02 02:10:39 +00:00
|
|
|
'vertical-center',
|
2021-11-16 12:33:01 +00:00
|
|
|
'interactive',
|
2022-07-27 13:04:31 +00:00
|
|
|
'vertical-center',
|
2021-11-16 12:33:01 +00:00
|
|
|
styles.addButton
|
|
|
|
)}
|
|
|
|
type="button"
|
|
|
|
onClick={onClick}
|
2022-07-26 19:44:08 +00:00
|
|
|
disabled={disabled}
|
2021-11-16 12:33:01 +00:00
|
|
|
>
|
2022-08-02 22:19:28 +00:00
|
|
|
<Icon icon="plus-circle" feather />
|
2022-07-27 13:04:31 +00:00
|
|
|
{label}
|
2021-11-16 12:33:01 +00:00
|
|
|
</button>
|
|
|
|
);
|
|
|
|
}
|