import React from "react"; const Input = ({ title, borderType, gapSize, id, type, direction, className, onChange, style, bg }) => { 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 (