WIP

src/components/form/Input.tsx

@@ -8,6 +8,8 @@ export interface InputProps {
   type: string;
   name: string;
   value?: string;
+  disabled?: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Input = ({
@@ -18,6 +20,8 @@ export const Input = ({
   type,
   name,
   value,
+  disabled,
+  onChange,
 }: InputProps): JSX.Element => {
   return (
     <div className="space-y-1">
@@ -40,10 +44,12 @@ export const Input = ({
           name={name}
           id={name}
           value={value}
+          onChange={onChange}
           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 && (

src/components/form/Toggle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Switch } from '@headlessui/react';
+
+export interface ToggleProps {
+  enabled: boolean;
+  setEnabled: (state: boolean) => void;
+}
+
+export const Toggle = ({ enabled, setEnabled }: ToggleProps): JSX.Element => {
+  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>
+  );
+};