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;