(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,6 +27,7 @@ const Input = ({
     thick: 'border-2',
   };
   return (
+    <div className="relative">
       <input
         className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
         type={type}
@@ -41,6 +43,14 @@ const 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>
   );
 };