Improve input customization

rsconcept/frontend/src/components/Common/TextArea.tsx

@@ -1,24 +1,20 @@
+import { TextareaHTMLAttributes } from 'react';
+
 import Label from './Label';
 
-interface TextAreaProps {
-  id: string
+interface TextAreaProps 
+extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
   label: string
-  required?: boolean
-  disabled?: boolean
-  spellCheck?: boolean
-  placeholder?: string
   widthClass?: string
-  rows?: number
-  value?: string | ReadonlyArray<string> | number | undefined;
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
-  onFocus?: () => void
+  colorClass?: string
 }
 
 function TextArea({
-  id, label, placeholder,
-  required, spellCheck, disabled,
-  widthClass = 'w-full', rows = 4, value,
-  onChange, onFocus
+  id, label, required,
+  widthClass = 'w-full',
+  colorClass = 'colorClass',
+  rows = 4,
+  ...props
 }: TextAreaProps) {
   return (
     <div className='flex flex-col items-start [&:not(:first-child)]:mt-3'>
@@ -28,15 +24,10 @@ function TextArea({
         htmlFor={id}
       />
       <textarea id={id}
-          className={`px-3 py-2 mt-2 leading-tight border shadow clr-input ${widthClass}`}
+          className={`px-3 py-2 mt-2 leading-tight border shadow ${colorClass} ${widthClass}`}
           rows={rows}
-          placeholder={placeholder}
           required={required}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          disabled={disabled}
-          spellCheck={spellCheck}
+          {...props}
       />
     </div>
   );

rsconcept/frontend/src/components/Common/TextInput.tsx

@@ -7,10 +7,13 @@ interface TextInputProps
   id: string
   label: string
   widthClass?: string
+  colorClass?: string
 }
 
 function TextInput({
-  id, required, label, widthClass = 'w-full',
+  id, required, label,
+  widthClass = 'w-full',
+  colorClass = 'clr-input',
   ...props
 }: TextInputProps) {
   return (
@@ -21,7 +24,7 @@ function TextInput({
         htmlFor={id}
       />
       <input id={id}
-        className={`px-3 py-2 mt-2 leading-tight border shadow truncate hover:text-clip clr-input ${widthClass}`}
+        className={`px-3 py-2 mt-2 leading-tight border shadow truncate hover:text-clip ${colorClass} ${widthClass}`}
         required={required}
         {...props}
       />