1 files changed, 31 insertions, 0 deletions
diff --git a/src/components/organisms/forms/settings-form/settings-form.tsx b/src/components/organisms/forms/settings-form/settings-form.tsx
new file mode 100644
index 0000000..117665d
--- /dev/null
+++ b/src/components/organisms/forms/settings-form/settings-form.tsx
@@ -0,0 +1,31 @@
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
+import { Form, type FormProps } from '../../../atoms';
+import { AckeeToggle } from './ackee-toggle';
+import { MotionToggle } from './motion-toggle';
+import { PrismThemeToggle } from './prism-theme-toggle';
+import styles from './settings-form.module.scss';
+import { ThemeToggle } from './theme-toggle';
+
+export type SettingsFormProps = Omit<FormProps, 'children'>;
+
+const SettingsFormWithRef: ForwardRefRenderFunction<
+  HTMLFormElement,
+  SettingsFormProps
+> = ({ className = '', ...props }, ref) => {
+  const formClass = `${styles.form} ${className}`;
+
+  return (
+    <Form {...props} className={formClass} ref={ref}>
+      <ThemeToggle className={styles.item} />
+      <PrismThemeToggle className={styles.item} />
+      <MotionToggle className={styles.item} />
+      <AckeeToggle
+        className={styles.item}
+        // eslint-disable-next-line react/jsx-no-literals
+        direction="upwards"
+      />
+    </Form>
+  );
+};
+
+export const SettingsForm = forwardRef(SettingsFormWithRef);