feat: pseudo login

src/components/ui/Input.module.scss

@@ -1,5 +1,5 @@
 @reference "../../index.scss";
 
 .input_field {
-  @apply w-full rounded-[4rem] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+  @apply w-full rounded-[4rem] border bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
 }

src/components/ui/Input.tsx

@@ -10,6 +10,10 @@ const input = tv({
       center: "text-center",
       left: "text-left",
     },
+    "border-error": {
+      true: "border-red-500 placeholder:text-red-500",
+      false: "border-gray-300",
+    },
   },
   defaultVariants: {
     "text-align": "left",
@@ -21,7 +25,7 @@ interface InputProps {
   placeholder?: string;
   textAlign?: "center" | "left";
   error?: string;
-  ref: Ref<HTMLInputElement> | null;
+  textRef?: Ref<HTMLInputElement> | null;
 }
 
 const Input: FunctionComponent<InputProps> = ({
@@ -29,17 +33,21 @@ const Input: FunctionComponent<InputProps> = ({
   placeholder = "",
   textAlign,
   error = "",
-  ref = null,
+  textRef = null,
 }: InputProps) => {
   return (
     <div class="flex w-full flex-col items-center gap-1">
       <input
         type={isPassword ? "password" : "text"}
-        class={input({ "text-align": textAlign })}
+        class={input({ "text-align": textAlign, "border-error": error !== "" })}
         placeholder={placeholder}
-        ref={ref}
+        ref={textRef}
       />
-      <p class={cn("invisible h-10 w-[80%] text-center text-sm break-words text-red-500", { visible: error !== "" })}>
+      <p
+        class={cn("invisible h-10 w-[80%] text-center text-[0.7rem] break-words text-red-500", {
+          visible: error !== "",
+        })}
+      >
         {error}
       </p>
     </div>