chore: close toolbar modals on click/focus outside

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;