upd

src/components/Input.tsx

@@ -1,18 +1,44 @@
-import React from "react";
+import clsx from "clsx";
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
+interface NewInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  placeholder?: string;
+  isError?: boolean;
+  errorMessage?: string;
 }
 
-function Input({ label, ...props }: InputProps) {
+function Input({
+  placeholder,
+  isError,
+  errorMessage,
+  ...props
+}: NewInputProps) {
   return (
-    <label className="space-y-2">
-      {label && <p className="text-xs text-black/50">{label}</p>}
+    <div className="relative">
       <input
         {...props}
-        className="bg-white rounded-lg px-5 py-3.5 outline-none ring-1 ring-transparent focus:ring-[#363636] transition-[ring-color] inline-block w-full"
+        placeholder=""
+        className={clsx(
+          isError
+            ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
+            : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
+          "peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
+        )}
       />
-    </label>
+      {placeholder && (
+        <span
+          className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 
+              peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0
+              peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0"
+        >
+          {placeholder}
+        </span>
+      )}
+      {isError && (
+        <p className="caption-s font-medium text-[#FF4517] mt-[0.556vw]">
+          {errorMessage}
+        </p>
+      )}
+    </div>
   );
 }