Added footer and input component

src/components/shared/InputCompOne.tsx

@@ -11,7 +11,12 @@ interface InputCompOneProps {
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
+  labelSpan?: string;
+  labelSpanClass?: string;
   parentInputClass?: string;
+  inputClass?: string;
+  parentSelectClass?: string;
+  selectClass?: string;
   input?: boolean;
   select?: boolean;
   inputType?: string;
@@ -21,7 +26,9 @@ interface InputCompOneProps {
 
 const InputCompOne: React.FC<InputCompOneProps> = ({
   label,
-  labeClass,
+  labelClass,
+  labelSpan,
+  labelSpanClass,
   placeholder = "Placeholder",
   value,
   onChange,
@@ -35,13 +42,17 @@ const InputCompOne: React.FC<InputCompOneProps> = ({
   inputType = "text",
   selectOptions,
   icon,
+  selectClass,
+  inputClass,
+  parentInputClass,
+  parentSelectClass,
 }) => {
   return (
-    <div>
+    <div className={parentInputClass}>
       {label && (
-        <label htmlFor={name} className={`flex items-center ${labeClass}`}>
+        <label htmlFor={name} className={`flex items-center ${labelClass}`}>
           {label}
-          {/* <span>*</span> */}
+          {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
         </label>
       )}
       {input && (
@@ -55,6 +66,7 @@ const InputCompOne: React.FC<InputCompOneProps> = ({
             name={name}
             tabIndex={tabIndex}
             ref={ref}
+            className={inputClass}
           />
           {icon && (
             <div className="">
@@ -64,9 +76,9 @@ const InputCompOne: React.FC<InputCompOneProps> = ({
         </div>
       )}
       {select && (
-        <div className="">
-          <select name={name} id="" value={selectValue}>
-            {selectOptions.map((option) => (
+        <div className={parentSelectClass}>
+          <select name={name} id="" value={selectValue} className={selectClass}>
+            {selectOptions?.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>