WIP

src/components/generic/Input.tsx

@@ -2,18 +2,24 @@ import React from 'react';
 
 type DefaultInputProps = JSX.IntrinsicElements['input'];
 
-interface LocalInputProps {
+interface InputProps extends DefaultInputProps {
   icon?: JSX.Element;
   label?: string;
   valid?: boolean;
   validationMessage?: string;
 }
 
-export type InputProps = LocalInputProps & DefaultInputProps;
-
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   function Input(
-    { icon, label, valid, validationMessage, id, ...props }: InputProps,
+    {
+      icon,
+      label,
+      valid,
+      validationMessage,
+      id,
+      disabled,
+      ...props
+    }: InputProps,
     ref,
   ) {
     return (
@@ -35,9 +41,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           <input
             id={id}
             ref={ref}
+            disabled={disabled}
             {...props}
-            className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary bg-white dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
+            className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary  dark:border-gray-600 dark:text-white ${
               icon ? 'pl-9' : 'pl-2'
+            } ${
+              disabled
+                ? 'bg-gray-200 dark:bg-primaryDark cursor-not-allowed'
+                : 'bg-white dark:bg-secondaryDark'
             }`}
           />
         </div>