From 578958f24c48b698f9a37c95191cf01abf28ae22 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Sun, 6 Feb 2022 14:41:39 +0330
Subject: [PATCH] Input is Now A Component

---
 src/components/input/index.js | 55 +++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/input/index.js

diff --git a/src/components/input/index.js b/src/components/input/index.js
new file mode 100644
index 0000000..27df4f7
--- /dev/null
+++ b/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;
\ No newline at end of file