Hugging Face's logo

Spaces:
yderre-aubay
/
infer-vst
Sleeping

App Files Community
infer-vst
File size: 3,938 Bytes 
15975c4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
96
97
 
import { useState } from 'react';
import { Stack, Typography, Badge, ButtonGroup, Button, Switch, FormControlLabel } from '@mui/material';

import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
import MailIcon from '@mui/icons-material/Mail';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';

export const BadgeView = () => {
    const [count, setCount] = useState(8);
    const [invisible, setInvisible] = useState(false);

    const handleBadgeVisibility = () => {
        setInvisible(!invisible);
    };

    return (
        <Stack spacing={3}>
            <Typography variant="h6" fontWeight="bold">
                Badge
            </Typography>
            {/*<Stack direction="row" spacing={4} flexWrap="wrap">
                <Badge badgeContent="" variant='dot'>
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={1} >
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={12} >
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={100} >
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={1000} max={999} >
                    <NotificationsActiveIcon />
                </Badge>
            </Stack>
            <Stack direction="row" spacing={4} flexWrap="wrap">
                <Badge badgeContent="" color="primary" variant='dot'>
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={1} color="primary">
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={12} color="primary">
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={100} color="primary">
                    <NotificationsActiveIcon />
                </Badge>
                <Badge badgeContent={1000} max={999} color="primary">
                    <NotificationsActiveIcon />
                </Badge>
    </Stack>*/}
            <Stack direction="row" spacing={3} alignItems={'center'}>
                <Badge badgeContent={count} max={10}>
                    <NotificationsActiveIcon />
                </Badge>
                <Badge color='primary' badgeContent={count} max={10}>
                    <NotificationsActiveIcon />
                </Badge>
                <Badge color='secondary' badgeContent={count} max={10}>
                    <NotificationsActiveIcon />
                </Badge>
                <ButtonGroup size='small'>
                    <Button size='small' onClick={() => {
                        setCount(Math.max(count - 1, 0));
                    }}>
                        <RemoveIcon fontSize='small' />
                    </Button>
                    <Button size='small' onClick={() => {
                        setCount(count + 1);
                    }}>
                        <AddIcon fontSize='small' />
                    </Button>
                </ButtonGroup>
            </Stack>
            <Stack direction="row" spacing={3} alignItems={'center'}>
                <Badge variant='dot' invisible={invisible}>
                    <MailIcon />
                </Badge>
                <Badge color='primary' variant='dot' invisible={invisible}>
                    <MailIcon />
                </Badge>
                <Badge color='secondary' variant='dot' invisible={invisible}>
                    <MailIcon />
                </Badge>
                <FormControlLabel
                    sx={{ color: 'text.primary' }}
                    control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
                    label="Show Badge"
                />
            </Stack>
        </Stack>
    );
}