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;