Hugging Face's logo

Spaces:
yderre-aubay
/
infer-vst
Sleeping

App Files Community
infer-vst
File size: 2,480 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
 
import { Avatar, Badge, Box, Stack, Typography, styled } from '@mui/material';

const CustomBadge = styled(Badge)(({ theme }) => ({
    '& .MuiBadge-badge': {
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.main,
        boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
        '&::after': {
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            borderRadius: '50%',
            animation: 'ripple 1.2s infinite ease-in-out',
            border: '1px solid currentColor',
            content: '""',
        },
    },
    '@keyframes ripple': {
        '0%': {
            transform: 'scale(.8)',
            opacity: 1,
        },
        '100%': {
            transform: 'scale(2.4)',
            opacity: 0,
        },
    },
}));

export const AvatarView = () => {
    return (
        <Stack spacing={3}>
            <Typography variant="h6" fontWeight="bold">
                Avatar
            </Typography>
            <Stack direction={'row'} spacing={1}>
                <Avatar sx={{ bgcolor: 'primary.main', color: 'onPrimary.main' }}>
                    Zk
                </Avatar>
                <Avatar sx={{ bgcolor: 'secondary.main', color: 'onSecondary.main' }}>
                    Zk
                </Avatar>
                <Avatar sx={{ bgcolor: 'tertiary.main', color: 'onTertiary.main' }}>
                    Zk
                </Avatar>
                <Box sx={{ px: 1 }} />
                <Avatar sx={{ bgcolor: 'primaryContainer.main', color: 'onPrimaryContainer.main' }}>
                    ZK
                </Avatar>
                <Avatar sx={{ bgcolor: 'secondaryContainer.main', color: 'onSecondaryContainer.main' }}>
                    ZK
                </Avatar>
                <Avatar sx={{ bgcolor: 'tertiaryContainer.main', color: 'onTertiaryContainer.main' }}>
                    ZK
                </Avatar>
                <Box sx={{ px: 1 }} />
                <CustomBadge variant='dot' overlap='circular' anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
                    <Avatar
                        src='https://i.pravatar.cc/300'
                        sx={{ bgcolor: 'primaryContainer.main', color: 'onPrimaryContainer.main' }}>
                        AS
                    </Avatar>
                </CustomBadge>
            </Stack>
        </Stack>
    );
}