Add more settings

src/components/form/Input.tsx

@@ -1,35 +1,32 @@
 import React from 'react';
 
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
 export interface InputProps {
   valid?: boolean;
-  placeholder?: string;
   validationMessage?: string;
   icon?: JSX.Element;
-  type: string;
-  name: string;
-  value?: string;
-  disabled?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: string;
 }
 
-export const Input = ({
-  valid,
-  placeholder,
-  validationMessage,
-  icon,
-  type,
-  name,
-  value,
-  disabled,
-  onChange,
-}: InputProps): JSX.Element => {
+export const Input = React.forwardRef<
+  HTMLInputElement,
+  InputProps & DefaultInputProps
+>(function Input(
+  {
+    valid,
+    validationMessage,
+    icon,
+    label,
+    id,
+    ...props
+  }: InputProps & DefaultInputProps,
+  ref,
+) {
   return (
     <div className="space-y-1">
-      <label
-        htmlFor={name}
-        className="block text-sm font-medium dark:text-white"
-      >
-        {name}
+      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+        {label}
       </label>
       <div className="relative">
         {icon && (
@@ -40,16 +37,11 @@ export const Input = ({
           </div>
         )}
         <input
-          type={type}
-          name={name}
-          id={name}
-          value={value}
-          onChange={onChange}
+          ref={ref}
+          {...props}
           className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
             icon ? 'pl-9' : 'pl-2'
           }`}
-          placeholder={placeholder}
-          disabled={disabled}
         />
       </div>
       {!valid && (
@@ -57,4 +49,4 @@ export const Input = ({
       )}
     </div>
   );
-};
+});

src/components/form/Select.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+type DefaultSelectProps = JSX.IntrinsicElements['select'];
+
+export interface SelectProps {
+  options: {
+    value: string;
+    label: string;
+  }[];
+  label: string;
+}
+
+export const Select = React.forwardRef<
+  HTMLSelectElement,
+  SelectProps & DefaultSelectProps
+>(function Select(
+  { options, label, id, ...props }: SelectProps & DefaultSelectProps,
+  ref,
+) {
+  return (
+    <div className="space-y-1">
+      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+        {label}
+      </label>
+      <select
+        ref={ref}
+        {...props}
+        className="block w-full p-2 border dark:border-gray-600 rounded-md shadow-sm dark:bg-secondaryDark"
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+});

src/components/form/Toggle.tsx

@@ -1,26 +1,33 @@
 import React from 'react';
 
-import { Switch } from '@headlessui/react';
+type DefaultInputProps = JSX.IntrinsicElements['input'];
 
 export interface ToggleProps {
-  enabled: boolean;
-  setEnabled: (state: boolean) => void;
+  label: string;
 }
 
-export const Toggle = ({ enabled, setEnabled }: ToggleProps): JSX.Element => {
+export const Toggle = React.forwardRef<
+  HTMLInputElement,
+  ToggleProps & DefaultInputProps
+>(function Input(
+  { label, id, checked, ...props }: ToggleProps & DefaultInputProps,
+  ref,
+) {
   return (
-    <Switch
-      checked={enabled}
-      onChange={setEnabled}
-      className={`${enabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-700'}
-          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
-    >
-      <span className="sr-only">Use setting</span>
-      <span
-        aria-hidden="true"
-        className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
-            pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
-      />
-    </Switch>
+    <div className="flex flex-col">
+      <span className="block text-sm font-medium dark:text-white">{label}</span>
+      <div className="relative w-14 mr-2 ml-auto select-none">
+        <input
+          ref={ref}
+          {...props}
+          type="checkbox"
+          className="peer checked:right-0 absolute w-7 h-7 rounded-full bg-white appearance-none cursor-pointer"
+        />
+        <label
+          htmlFor={id}
+          className="block overflow-hidden h-7 rounded-full peer-checked:bg-primary shadow-sm bg-gray-300 dark:bg-gray-700 cursor-pointer"
+        ></label>
+      </div>
+    </div>
   );
-};
+});