All files / src/app/student-page/components/class-list SearchField.jsx

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
 
 
 
 
1x
10x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 }) => {
    return (
        <TextField
            id="searchInputField"
            placeholder="Search class"
            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;