forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
StylingInfo.tsx
79 lines (78 loc) · 2.43 KB
/
StylingInfo.tsx
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
import * as React from 'react';
import { alpha } from '@mui/material/styles';
import Box, { BoxProps } from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
import Link from 'docs/src/modules/components/Link';
import ROUTES from 'docs/src/route';
export default function StylingInfo({
appeared,
content,
...props
}: { appeared: boolean; content?: React.ReactElement } & BoxProps) {
const [hidden, setHidden] = React.useState(false);
const defaultContent = (
<React.Fragment>
<Typography fontWeight="bold" color="#fff" variant="body2">
Own the styling!
</Typography>
<Typography color="grey.400" variant="body2">
Build your own design system using the{' '}
<Link href={ROUTES.theming} sx={{ color: 'primary.300' }}>
sophisticated theming features
</Link>
. You can also start by using Google's Material Design.
</Typography>
</React.Fragment>
);
return (
<Box
{...props}
sx={{
position: 'absolute',
bottom: 0,
transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
transition: '0.3s',
left: 0,
right: 0,
px: 2,
pt: 1,
pb: 2,
bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
backdropFilter: 'blur(8px)',
zIndex: 1,
borderTop: '1px solid',
borderColor: 'divider',
borderRadius: '0 0 10px 10px',
...props.sx,
}}
>
<IconButton
aria-label={hidden ? 'show' : 'hide'}
onClick={() => setHidden((bool) => !bool)}
sx={{
position: 'absolute',
zIndex: 2,
transition: '0.3s',
right: 10,
bottom: '100%',
transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
opacity: appeared ? 1 : 0,
bgcolor: 'primaryDark.500',
'&:hover, &.Mui-focused': {
bgcolor: 'primaryDark.600',
},
}}
>
{hidden ? (
<KeyboardArrowUpRounded fontSize="small" />
) : (
<KeyboardArrowDownRounded fontSize="small" />
)}
</IconButton>
{content || defaultContent}
</Box>
);
}