chore: add a Settings modal component

1 files changed, 45 insertions, 6 deletions

diff --git a/src/components/molecules/forms/labelled-select.tsx b/src/components/molecules/forms/labelled-select.tsx
index 442e91a..7d4237a 100644
--- a/src/components/molecules/forms/labelled-select.tsx
+++ b/src/components/molecules/forms/labelled-select.tsx
@@ -1,23 +1,62 @@
-import Label from '@components/atoms/forms/label';
+import Label, { LabelProps } from '@components/atoms/forms/label';
 import Select, { type SelectProps } from '@components/atoms/forms/select';
-import { FC } from 'react';
+import { VFC } from 'react';
+import styles from './labelled-select.module.scss';
 
-type LabelledSelectProps = SelectProps & {
+export type LabelledSelectProps = Omit<
+  SelectProps,
+  'aria-labelledby' | 'className'
+> & {
+  /**
+   * The field label.
+   */
   label: string;
+  /**
+   * Set additional classnames to the label.
+   */
+  labelClassName?: string;
+  /**
+   * The label position. Default: top.
+   */
+  labelPosition?: 'left' | 'top';
+  /**
+   * The label size.
+   */
+  labelSize?: LabelProps['size'];
+  /**
+   * Set additional classnames to the select field.
+   */
+  selectClassName?: string;
 };
 
-const LabelledSelect: FC<LabelledSelectProps> = ({
+const LabelledSelect: VFC<LabelledSelectProps> = ({
   id,
   label,
+  labelClassName = '',
+  labelPosition = 'top',
+  labelSize,
   required,
+  selectClassName = '',
   ...props
 }) => {
+  const positionModifier = `label--${labelPosition}`;
+
   return (
     <>
-      <Label htmlFor={id} required={required}>
+      <Label
+        htmlFor={id}
+        required={required}
+        size={labelSize}
+        className={`${styles[positionModifier]} ${labelClassName}`}
+      >
         {label}
       </Label>
-      <Select id={id} required={required} {...props} />
+      <Select
+        id={id}
+        required={required}
+        {...props}
+        className={selectClassName}
+      />
     </>
   );
 };