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