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 = ({
8 children = null,
9 noDrawer = false,
10 ...props
11}: FabProps & {noDrawer?: boolean}) => {
12 const theme = useTheme();
13 const isFabMinimized = useMinimizedFab();
14 const variant = !isFabMinimized && children ? 'extended' : 'circular';
15
16 return (
17 <FabMui
18 color="secondary"
19 variant={variant}
20 {...props}
21 sx={{
22 transition: 'all 0.1s ease',
23 position: 'fixed',
24 right: theme.spacing(3),
25 bottom: theme.spacing(3),
26
27 [theme.breakpoints.down('md')]: {
28 right: theme.spacing(2),
29 bottom: noDrawer ? theme.spacing(1) : theme.spacing(12),
30 },
31 }}
32 >
33 <Icon
34 sx={{
35 marginRight:
36 variant === 'extended' ? theme.spacing(1) : theme.spacing(0),
37 }}
38 >
39 add
40 </Icon>
41 {!isFabMinimized && children}
42 </FabMui>
43 );
44};
45
46export default Fab;