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 | 6x 198x 24x | /* eslint-disable react/prop-types */
import { Fade, IconButton, InputAdornment, TextField } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import { ClearIcon } from "@mui/x-date-pickers";
const SearchField = ({ search, setSearch, placeHolder }) => {
return (
<TextField
id="searchInputField"
placeholder={placeHolder}
variant="outlined"
size="small"
value={search}
fullWidth
sx={{ minWidth: 200 }}
onChange={(e) => setSearch(e.target.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle clear search text"
onClick={() => {
setSearch("");
}}
edge="end"
disableRipple
>
<Fade in={search !== ""}>
<ClearIcon sx={{ color: "text.primary" }} />
</Fade>
</IconButton>
</InputAdornment>
),
}}
/>
);
};
export default SearchField;
|