Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { InputAdornment, TextField } from "@mui/material"; import React, { useState } from "react"; import { Icon } from "../Icon"; interface Props { sx?: React.CSSProperties; placeholder?: string; label?: string; type: "text" | "password" | "email" | "number"; slotPropPosition?: "start" | "end"; slotPropsChildren?: React.ReactNode; endAdornment?: React.ReactNode; endAddornmentPosition?: "start" | "end"; iconPasswordColor?: string; value?: string; onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void; } export const Input = ({ sx, placeholder, label, type, slotPropPosition = "start", slotPropsChildren, endAddornmentPosition = "end", endAdornment, iconPasswordColor = "black", value, onChange, onBlur, }: Props) => { const [showPassword, setShowPassword] = useState(false); const handleClickShowPassword = () => { setShowPassword(!showPassword); }; return ( <TextField value={value} onChange={onChange} onBlur={onBlur} type={type === "password" ? (showPassword ? "text" : "password") : type} label={label} variant="outlined" placeholder={placeholder} style={{ color: "black" }} sx={{ ...sx, width: "100%", marginTop: "20px", "& .MuiOutlinedInput-root": { "& fieldset": { border: "none", borderBottom: "2px solid #a5f3fc", color: "black", }, "&:hover fieldset": { borderBottom: "2px solid #67e8f9", }, "&.Mui-focused fieldset": { border: "2px solid #67e8f9", }, }, }} slotProps={{ input: { startAdornment: slotPropsChildren && ( <InputAdornment position={slotPropPosition}> {slotPropsChildren} </InputAdornment> ), endAdornment: type === "password" ? ( <InputAdornment position={"end"}> <Icon style={{ cursor: "pointer" }} name={showPassword ? "EyeSlash" : "Eye"} color={iconPasswordColor} onClick={handleClickShowPassword} /> </InputAdornment> ) : ( endAdornment && ( <InputAdornment position={endAddornmentPosition}> {endAdornment} </InputAdornment> ) ), }, }} /> ); }; |