forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ExampleFilterStatusCheckbox.js
95 lines (94 loc) · 2.72 KB
/
ExampleFilterStatusCheckbox.js
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 * as React from 'react';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Checkbox from '@mui/joy/Checkbox';
import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
export default function ExampleFilterStatusCheckbox() {
const [status, setStatus] = React.useState({
declinedPayment: true,
deliveryError: true,
wrongAddress: false,
});
return (
<Sheet
variant="outlined"
sx={{ p: 2, borderRadius: 'sm', width: 300, bgcolor: 'background.body' }}
>
<Typography
id="filter-status"
sx={{
textTransform: 'uppercase',
fontSize: 'xs2',
letterSpacing: 'lg',
fontWeight: 'lg',
color: 'text.secondary',
mb: 2,
}}
>
Filter status
</Typography>
<Box role="group" aria-labelledby="filter-status">
<List>
<ListItem variant="soft" color="danger">
<Checkbox
label="Declined Payment"
color="danger"
overlay
checked={status.declinedPayment}
onChange={(event) =>
setStatus({ ...status, declinedPayment: event.target.checked })
}
sx={{ color: 'inherit' }}
/>
<Typography textColor="inherit" sx={{ ml: 'auto' }}>
8
</Typography>
</ListItem>
<ListItem variant="plain" color="warning" sx={{ borderRadius: 'sm' }}>
<Checkbox
label="Delivery Error"
color="warning"
overlay
checked={status.deliveryError}
onChange={(event) =>
setStatus({ ...status, deliveryError: event.target.checked })
}
/>
<Typography textColor="inherit" sx={{ ml: 'auto' }}>
24
</Typography>
</ListItem>
<ListItem variant="plain" sx={{ borderRadius: 'sm' }}>
<Checkbox
label="Wrong Address"
color="neutral"
overlay
checked={status.wrongAddress}
onChange={(event) =>
setStatus({ ...status, wrongAddress: event.target.checked })
}
/>
</ListItem>
</List>
</Box>
<Button
variant="outlined"
color="neutral"
size="sm"
onClick={() =>
setStatus({
declinedPayment: false,
deliveryError: false,
wrongAddress: false,
})
}
sx={{ px: 1.5, mt: 1 }}
>
Clear All
</Button>
</Sheet>
);
}