style(inputComponent): fix indentation and spacing in InputComponent component
This commit is contained in:
parent
e27f6d5d7d
commit
1b6e61d3cb
1 changed files with 76 additions and 67 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue