select input added where necessary

src/components/shared/InputCompOne.tsx

@@ -1,10 +1,12 @@
 import React, { forwardRef } from "react";
+import { Icons } from "../Icons";
 
 export interface InputCompOneProps {
-  label: string;
-  labelClass: string;
+  label?: string;
+  labelClass?: string;
   labelSpan?: string;
   labelSpanClass?: string;
+  floatLabel?: string;
   placeholder?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -20,7 +22,6 @@ export interface InputCompOneProps {
   inputClass?: string;
   parentInputClass?: string;
   selectClass?: string;
-  parentSelectClass?: string;
   parentClass?: string;
   maxLength?: number;
   error?: string;
@@ -33,6 +34,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       labelClass,
       labelSpan,
       labelSpanClass,
+      floatLabel,
       placeholder,
       value,
       onChange,
@@ -47,7 +49,6 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       inputClass,
       parentInputClass,
       selectClass,
-      parentSelectClass,
       parentClass,
       maxLength,
       error,
@@ -57,14 +58,14 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
     return (
       <div className={parentClass}>
         {label && (
-          <label htmlFor="" className={labelClass}>
+          <label htmlFor={label ? label : floatLabel} className={labelClass}>
             {label}
             {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
             {error && <span className='text-[10px] text-red-500'>{error}</span>}
           </label>
         )}
         {input && (
-          <div className={parentInputClass}>
+          <div className={`relative ${parentInputClass}`}>
             <input
               type={inputType}
               placeholder={placeholder}
@@ -74,18 +75,26 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               name={name}
               tabIndex={tabIndex}
               ref={forwardedRef}
-              className={inputClass}
+              className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
               maxLength={maxLength}
+              id={label ? label : floatLabel}
             />
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
           </div>
         )}
         {select && (
-          <div className={parentSelectClass}>
+          <div className={`relative ${parentInputClass}`}>
             <select
               name={name}
-              id=""
+              id={label ? label : floatLabel}
               value={selectValue}
-              className={selectClass}
+              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
+              // onChange={onChange}
             >
               {selectOptions.map(({ value, label }) => (
                 <option key={value} value={value}>
@@ -93,6 +102,16 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
                 </option>
               ))}
             </select>
+            {floatLabel &&
+              <label
+                htmlFor={label ? label : floatLabel}
+                className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
+              >{floatLabel}</label>
+            }
+            {/* select custon arrow */}
+            <div className='absolute right-4 top-1/2 -translate-y-1/2'>
+              <Icons name='arrow-down' />
+            </div>
           </div>
         )}
       </div>