From ae73b5d256799264a9814fd90b3d9cf88825b435 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 16 Apr 2025 14:33:55 +0300
Subject: [PATCH] feat: input params

---
 src/components/ui/Input.module.scss |  2 +-
 src/components/ui/Input.tsx         | 29 ++++++++++++++++++++++-------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/Input.module.scss b/src/components/ui/Input.module.scss
index 0caf858..2248225 100644
--- a/src/components/ui/Input.module.scss
+++ b/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;
 }
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 1c9bfd0..24adec2 100644
--- a/src/components/ui/Input.tsx
+++ b/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 (
-    <input
-      type={isPassword ? "password" : "text"}
-      class={input({ "text-align": textAlign })}
-      placeholder={placeholder}
-    />
+    <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>
   );
 };