aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-30 12:44:11 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:15:27 +0100
commit0e52a59917406ad03c174e030c6c1c92ab23449d (patch)
tree693bbcc5edbe78ebd2f0050fddbc45c706e0ba61 /src/components/organisms/forms/motion-toggle/motion-toggle.tsx
parent84a679b0e48ed76eee2fa44d3caac83591aa3c8c (diff)
refactor(components): extract SettingsForm component form SettingsModal
We could use an array of items and map over it instead of repeating the Switch component for each settings but with translations, it becomes quickly unreadable. So I prefer to keep separate components.
Diffstat (limited to 'src/components/organisms/forms/motion-toggle/motion-toggle.tsx')
-rw-r--r--src/components/organisms/forms/motion-toggle/motion-toggle.tsx65
1 files changed, 0 insertions, 65 deletions
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
deleted file mode 100644
index 33527c3..0000000
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { FC } from 'react';
-import { useIntl } from 'react-intl';
-import { useReducedMotion } from '../../../../utils/hooks';
-import { Legend } from '../../../atoms';
-import {
- Switch,
- type SwitchOption,
- type SwitchProps,
-} from '../../../molecules';
-
-export type MotionToggleProps = Omit<
- SwitchProps,
- 'isInline' | 'items' | 'name' | 'onSwitch' | 'value'
->;
-
-/**
- * MotionToggle component
- *
- * Render a Toggle component to set reduce motion.
- */
-export const MotionToggle: FC<MotionToggleProps> = ({ ...props }) => {
- const intl = useIntl();
- const { isReduced, toggleReducedMotion } = useReducedMotion();
-
- const reduceMotionLabel = intl.formatMessage({
- defaultMessage: 'Animations:',
- description: 'MotionToggle: reduce motion label',
- id: '/q5csZ',
- });
- const onLabel = intl.formatMessage({
- defaultMessage: 'On',
- description: 'MotionToggle: activate reduce motion label',
- id: 'va65iw',
- });
- const offLabel = intl.formatMessage({
- defaultMessage: 'Off',
- description: 'MotionToggle: deactivate reduce motion label',
- id: 'pWKyyR',
- });
-
- const options: [SwitchOption, SwitchOption] = [
- {
- id: 'reduced-motion-on',
- label: onLabel,
- value: 'on',
- },
- {
- id: 'reduced-motion-off',
- label: offLabel,
- value: 'off',
- },
- ];
-
- return (
- <Switch
- {...props}
- isInline
- items={options}
- legend={<Legend>{reduceMotionLabel}</Legend>}
- name="reduced-motion"
- onSwitch={toggleReducedMotion}
- value={isReduced ? 'off' : 'on'}
- />
- );
-};