diff options
Diffstat (limited to 'src/components/molecules/forms/toggle.tsx')
| -rw-r--r-- | src/components/molecules/forms/toggle.tsx | 90 |
1 files changed, 0 insertions, 90 deletions
diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx deleted file mode 100644 index 2f3e778..0000000 --- a/src/components/molecules/forms/toggle.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import BooleanField, { - type BooleanFieldProps, -} from '@components/atoms/forms/boolean-field'; -import Label, { type LabelProps } from '@components/atoms/forms/label'; -import { FC, ReactNode } from 'react'; -import styles from './toggle.module.scss'; - -export type ToggleChoices = { - /** - * The left part of the toggle field (unchecked). - */ - left: ReactNode; - /** - * The right part of the toggle field (checked). - */ - right: ReactNode; -}; - -export type ToggleProps = Pick<BooleanFieldProps, 'id' | 'name'> & { - /** - * The toggle choices. - */ - choices: ToggleChoices; - /** - * Set additional classnames to the toggle wrapper. - */ - className?: string; - /** - * The toggle label. - */ - label: string; - /** - * Set additional classnames to the label. - */ - labelClassName?: LabelProps['className']; - /** - * The label size. - */ - labelSize?: LabelProps['size']; - /** - * The toggle value. True if checked. - */ - value: boolean; - /** - * A callback function to update the toggle value. - */ - setValue: (value: boolean) => void; -}; - -/** - * Toggle component - * - * Render a toggle with a label and two choices. - */ -const Toggle: FC<ToggleProps> = ({ - choices, - className = '', - id, - label, - labelClassName = '', - labelSize, - name, - setValue, - value, -}) => { - return ( - <> - <BooleanField - checked={value} - className={styles.checkbox} - id={id} - name={name} - onChange={() => setValue(!value)} - type="checkbox" - /> - <Label - size={labelSize} - htmlFor={id} - className={`${styles.label} ${className}`} - > - <span className={`${styles.title} ${labelClassName}`}>{label}</span> - {choices.left} - <span className={styles.toggle}></span> - {choices.right} - </Label> - </> - ); -}; - -export default Toggle; |
