feat(FE): make input type union, make id required prop, add ChangeEvent, add styling for error state of input

Author: Manuel Proß

web/src/components/Inputs/TextInput.tsx

@@ -1,24 +1,19 @@
-'use client';
-import { useState } from 'react';
+import { CSSProperties, ChangeEvent, useState } from 'react';
 import { isRequiredValidator } from '@/helpers/validators';
 
 type InputProps = {
-    type: string;
+    type: 'text' | 'number' | 'email' | 'password';
     label?: string;
-    id?: string;
+    id: string;
     required?: boolean;
     placeholder?: string;
     value: string;
     name: string;
-    onChange: (value: string) => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 
 export default function Input({ type, label, id, required, placeholder, value, name, onChange }: InputProps) {
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const { value } = e.target;
-        onChange(value);
-    };
 
     const handleBlur = () => {
         if (required) {
@@ -28,19 +23,25 @@ export default function Input({ type, label, id, required, placeholder, value, n
     };
 
     return (
-        <div>
-            {label && <label htmlFor={id}>{label}</label>}
+        <div className="relative flex flex-col">
+            {label && (
+                <label className={`mb-1 ${errorMessage && 'text-red-800'}`} htmlFor={id}>
+                    {`${label}*`}
+                </label>
+            )}
             <input
                 className="border-[3px] border-solid rounded-lg border-gray-1 py-2 px-5 text-white bg-gray-2 outline-none focus:border-secondary focus-visible:border-secondary active:border-secondary"
+                style={errorMessage ? ({ borderColor: 'red' } as CSSProperties) : undefined}
                 type={type}
                 value={value}
                 name={name}
+                id={id}
                 placeholder={placeholder}
-                onChange={handleChange}
+                onChange={onChange}
                 onBlur={handleBlur}
                 required={required}
             />
-            {errorMessage && <span>{errorMessage}</span>}
+            <span className="block min-h-[25px] text-red-800">{errorMessage}</span>
         </div>
     );
 }