feat: input params

src/components/ui/Input.module.scss

@@ -1,5 +1,5 @@
 @reference "../../index.scss";
 
 .input_field {
-  @apply rounded-[4xl] 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 border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
 }

src/components/ui/Input.tsx

@@ -1,4 +1,5 @@
-import { FunctionComponent } from "preact";
+import { cn } from "@/utils/class-merge";
+import { FunctionComponent, Ref } from "preact";
 import { tv } from "tailwind-variants";
 import classes from "./Input.module.scss";
 
@@ -19,15 +20,29 @@ interface InputProps {
   isPassword?: boolean;
   placeholder?: string;
   textAlign?: "center" | "left";
+  error?: string;
+  ref: Ref<HTMLInputElement> | null;
 }
 
-const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "", textAlign }: InputProps) => {
+const Input: FunctionComponent<InputProps> = ({
+  isPassword = false,
+  placeholder = "",
+  textAlign,
+  error = "",
+  ref = null,
+}: InputProps) => {
   return (
+    <div class="flex w-full flex-col items-center gap-1">
       <input
         type={isPassword ? "password" : "text"}
         class={input({ "text-align": textAlign })}
         placeholder={placeholder}
+        ref={ref}
       />
+      <p class={cn("invisible h-10 w-[80%] text-center text-sm break-words text-red-500", { visible: error !== "" })}>
+        {error}
+      </p>
+    </div>
   );
 };