Code: Select all
import { useRef } from "react";
import classes from "./styles/Input.module.css";
function Input({
children,
inputID = "default",
iconSrc = "icons/person.svg",
hasIcon = false,
inputType = "text",
}) {
const input = useRef(null);
const placeholder = useRef(null);
function animatedPlaceholder(event) {
console.log(event);
if (document.activeElement === input.current || event.target.value !== "") {
placeholder.current.classList.add(classes["input-text-placeholder-up"]);
return;
}
placeholder.current.classList.remove(classes["input-text-placeholder-up"]);
}
return (
className={classes["input-text-container"]}
>
{hasIcon ? (
[img]{iconSrc} onClick={() =[/img]
input.current.focus()} />
) : (
""
)}
{input.current.focus();}}
>
{children}
);
}
export default Input;
< /code>
Und dies sind die Stile für diese Komponente < /p>
:root {
--icon-padding: 60px;
--icon-size: 28px;
}
.input-text-container {
position: relative;
width: 100%;
cursor: text;
}
.input-text-container:focus {
outline: 1px solid #0053A4;
}
.input-text {
box-sizing: border-box;
font-family: Roboto-Regular;
font-size: 18px;
border: 2px solid #0053A4;
border-radius: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 17px;
padding-bottom: 17px;
width: 100%;
z-index: 1;
}
.input-text-placeholder {
box-sizing: border-box;
position: absolute;
top: 0;
left: 12px;
transform: translateY(-50%);
font-size: 18px;
color: rgb(110, 110, 110);
top: 50%;
z-index: 1;
transition: top .15s, font-size .15s;
user-select: none;
}
.input-text-placeholder-up {
font-size: 12px;
top: 20%;
}
.input-text:focus {
outline: 1px solid #0053A4;
}
.with-icon {
padding-left: var(--icon-padding);
}
.placeholder-with-icon {
left: var(--icon-padding);
}
.input-text-icon {
position: absolute;
top: 50%;
left: calc((var(--icon-padding) - var(--icon-size)) / 2);
width: var(--icon-size);
height: var(--icon-size);
transform: translateY(-50%);
z-index: 1;
}
.input-text-label {
display: block;
user-select: none;
margin-bottom: 8px;
}