summaryrefslogtreecommitdiffstats
path: root/src/components/organisms/forms/settings-form.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/forms/settings-form.tsx')
-rw-r--r--src/components/organisms/forms/settings-form.tsx36
1 files changed, 36 insertions, 0 deletions
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
new file mode 100644
index 0000000..0a34601
--- /dev/null
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -0,0 +1,36 @@
+import Form from '@components/atoms/forms/form';
+import AckeeSelect, {
+ type AckeeSelectProps,
+} from '@components/molecules/forms/ackee-select';
+import MotionToggle from '@components/molecules/forms/motion-toggle';
+import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
+import ThemeToggle from '@components/molecules/forms/theme-toggle';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './settings-form.module.scss';
+
+export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'>;
+
+const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
+ const intl = useIntl();
+ const ariaLabel = intl.formatMessage({
+ defaultMessage: 'Settings form',
+ id: 'gX+YVy',
+ description: 'SettingsForm: an accessible form name',
+ });
+
+ return (
+ <Form aria-label={ariaLabel} onSubmit={() => null}>
+ <ThemeToggle labelClassName={styles.label} value={false} />
+ <PrismThemeToggle labelClassName={styles.label} value={false} />
+ <MotionToggle labelClassName={styles.label} value={false} />
+ <AckeeSelect
+ initialValue="full"
+ labelClassName={styles.label}
+ tooltipClassName={tooltipClassName}
+ />
+ </Form>
+ );
+};
+
+export default SettingsForm;