-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
DecoratorExamples.js
74 lines (71 loc) · 1.95 KB
/
DecoratorExamples.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
import * as React from 'react';
import { keyframes } from '@mui/system';
import Box from '@mui/joy/Box';
import Link from '@mui/joy/Link';
import Chip from '@mui/joy/Chip';
const circulate = keyframes({
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
});
export default function DecoratorExamples() {
return (
<Box
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}
>
<Link
href="#common-examples"
disabled
startDecorator={
<Box
sx={{
'--loader-thickness': '4px',
borderRadius: '50%',
border: 'var(--loader-thickness) solid',
borderColor: 'primary.softBg',
width: 'var(--Icon-fontSize)',
height: 'var(--Icon-fontSize)',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Box
sx={{
position: 'absolute',
top: 'calc(-1 * var(--loader-thickness))',
left: 'calc(-1 * var(--loader-thickness))',
width: 'inherit',
height: 'inherit',
borderRadius: 'inherit',
border: 'inherit',
boxSizing: 'inherit',
borderColor: (theme) =>
`${theme.vars.palette.primary.softColor} transparent transparent`,
animation: `${circulate} 1s ease infinite`,
}}
/>
</Box>
}
>
Processing...
</Link>
<Link
href="#common-examples"
underline="none"
variant="soft"
color="success"
endDecorator={
<Chip color="success" size="sm" sx={{ borderRadius: '3px', mr: '2px' }}>
HIRING!
</Chip>
}
sx={{ '--Link-gap': '0.5rem', pr: 0, pl: 1 }}
>
Careers
</Link>
</Box>
);
}