frontend/containers/Fab/index.tsx (view raw)
1import React from 'react';
2import {useTheme} from '@mui/material/styles';
3import Icon from '@mui/material/Icon';
4import FabMui, {FabProps} from '@mui/material/Fab';
5import useMinimizedFab from '../../hooks/useMinimizedFab';
6
7const Fab = ({children = null, ...props}: FabProps) => {
8 const theme = useTheme();
9 const isFabMinimized = useMinimizedFab();
10 const variant = !isFabMinimized && children ? 'extended' : 'circular';
11
12 return (
13 <FabMui
14 color="secondary"
15 variant={variant}
16 {...props}
17 sx={{
18 transition: 'all 0.1s ease',
19 position: 'fixed',
20 right: theme.spacing(3),
21 bottom: theme.spacing(3),
22
23 [theme.breakpoints.down('md')]: {
24 right: theme.spacing(2),
25 bottom: theme.spacing(9),
26 },
27 }}
28 >
29 <Icon
30 sx={{
31 marginRight:
32 variant === 'extended' ? theme.spacing(1) : theme.spacing(0),
33 }}
34 >
35 add
36 </Icon>
37 {!isFabMinimized && children}
38 </FabMui>
39 );
40};
41
42export default Fab;