Input is Now A Component

src/components/input/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+
+
+const Input = ({
+    title,
+    borderType,
+    gapSize,
+    id,
+    type,
+    direction
+
+}) => {
+
+    const focusHandler = (id) => {
+        let inputs = document.querySelectorAll(".Login-box-form-item");
+        let label = document.querySelectorAll(".Login-box-form-item-label");
+        let line = document.querySelectorAll(".Login-box-form-item-line");
+        inputs[id].style.borderColor = "#df1452";
+        inputs[id].style.backgroundColor = "#fff";
+        label[id].style.transform = `translate(-10px,-27px)`;
+        label[id].style.color = "#df1452";
+        line[id].style.backgroundColor = "#fff";
+    };
+
+    const blurHandler = (id) => {
+        let inputsBox = document.querySelectorAll(".Login-box-form-item");
+        let inputs = document.querySelectorAll(".Login-box-form-item-input");
+        let label = document.querySelectorAll(".Login-box-form-item-label");
+        let line = document.querySelectorAll(".Login-box-form-item-line");
+        if (inputs[id].value === "") {
+            inputsBox[id].style.borderColor = "#EBEBEB";
+            label[id].style.transform = "translate(0px,0px)";
+            label[id].style.color = "#959595";
+            line[id].style.backgroundColor = "#EBEBEB";
+        }
+    };
+    return (
+        <div className={`Login-box-form-item w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
+            <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 bg-color7`}></div>
+            <div className="Login-box-form-item-label text-sm text-color19 absolute right-6 transition-all duration-300 pointer-events-none">
+                {title ? title : 'نام کاربری'}
+            </div>
+            <input
+                type={type ? type : 'text'}
+                name="Login-box-form-item-input-name"
+                id="Login-box-form-item-input-name"
+                className="Login-box-form-item-input w-full h-full bg-transparent px-4 outline-0 rounded text-red52"
+                style={{ direction: direction ? direction : "ltr" }}
+                onFocus={() => focusHandler(id ? id : 0)}
+                onBlur={() => blurHandler(id ? id : 0)}
+            />
+        </div>
+    )
+}
+export default Input;