(feat:components) add label props

frontend/src/components/Input.tsx

@@ -7,6 +7,7 @@ const Input = ({
   value,
   isAutoFocused = false,
   placeholder,
+  label,
   maxLength,
   className,
   colorVariant = 'silver',
@@ -26,21 +27,30 @@ const Input = ({
     thick: 'border-2',
   };
   return (
-    <input
+    <div className="relative">
-      className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
+      <input
-      type={type}
+        className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
-      id={id}
+        type={type}
-      name={name}
+        id={id}
-      autoFocus={isAutoFocused}
+        name={name}
-      placeholder={placeholder}
+        autoFocus={isAutoFocused}
-      maxLength={maxLength}
+        placeholder={placeholder}
-      value={value}
+        maxLength={maxLength}
-      onChange={onChange}
+        value={value}
-      onPaste={onPaste}
+        onChange={onChange}
-      onKeyDown={onKeyDown}
+        onPaste={onPaste}
-    >
+        onKeyDown={onKeyDown}
-      {children}
+      >
-    </input>
+        {children}
+      </input>
+      {label && (
+        <div className="absolute -top-2 left-2">
+          <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+            {label}
+          </span>
+        </div>
+      )}
+    </div>
   );
 };
 

frontend/src/components/ToggleSwitch.tsx

@@ -23,9 +23,12 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
 }) => {
   return (
     <label
-      className={`cursor-pointer select-none items-center ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
+      className={`cursor-pointer select-none justify-between flex flex-row items-center ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
       htmlFor={id}
     >
+      {label && (
+        <span className="mr-2 text-eerie-black dark:text-white">{label}</span>
+      )}
       <div className="relative">
         <input
           type="checkbox"
@@ -48,9 +51,6 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
           }`}
         ></div>
       </div>
-      {label && (
-        <span className="ml-2 text-eerie-black dark:text-white">{label}</span>
-      )}
     </label>
   );
 };