(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
-      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}
-      id={id}
-      name={name}
-      autoFocus={isAutoFocused}
-      placeholder={placeholder}
-      maxLength={maxLength}
-      value={value}
-      onChange={onChange}
-      onPaste={onPaste}
-      onKeyDown={onKeyDown}
-    >
-      {children}
-    </input>
+    <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}
+        id={id}
+        name={name}
+        autoFocus={isAutoFocused}
+        placeholder={placeholder}
+        maxLength={maxLength}
+        value={value}
+        onChange={onChange}
+        onPaste={onPaste}
+        onKeyDown={onKeyDown}
+      >
+        {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>
   );
 };