style(inputComponent): fix indentation and spacing in InputComponent component

This commit is contained in:
Gabriel Almeida 2023-05-02 18:46:41 -03:00
commit 1b6e61d3cb

View file

@ -9,7 +9,7 @@ export default function InputComponent({
password,
}: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisable, setPwdVisable] = useState(false)
const [pwdVisible, setPwdVisible] = useState(false);
useEffect(() => {
if (disabled) {
setMyValue("");
@ -17,13 +17,19 @@ export default function InputComponent({
}
}, [disabled, onChange]);
return (
<div className={disabled ? "relative pointer-events-none cursor-not-allowed" : "relative"}>
<div
className={
disabled
? "relative pointer-events-none cursor-not-allowed"
: "relative"
}
>
<input
type={password && !pwdVisable ? "password" : "text"}
type={password && !pwdVisible ? "password" : "text"}
value={myValue}
className={classNames(
"block w-full form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
disabled ? " bg-gray-200 dark:bg-gray-700" : "",
disabled ? " bg-gray-200 dark:bg-gray-700" : ""
)}
placeholder="Type a text"
onChange={(e) => {
@ -33,9 +39,12 @@ export default function InputComponent({
/>
<button
className="absolute inset-y-0 right-0 items-center px-4 text-gray-600"
onClick={() => {setPwdVisable(!pwdVisable)}}
onClick={() => {
setPwdVisible(!pwdVisible);
}}
>
{password && (pwdVisable ? (
{password &&
(pwdVisible ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"