| 37 | } |
| 38 | |
| 39 | const SpeedDial: React.FC<SpeedDialProps> = ({ |
| 40 | actions, |
| 41 | mainButtonBgColor = 'fbuttons.blue', |
| 42 | isLoading = false, |
| 43 | }) => { |
| 44 | const { t } = useTranslation() |
| 45 | const { open, onToggle, onClose } = useDisclosure() |
| 46 | |
| 47 | return ( |
| 48 | <Box position="fixed" bottom="1.5rem" right="2rem" zIndex="docked"> |
| 49 | <Box position="relative"> |
| 50 | {open && ( |
| 51 | <Stack |
| 52 | position="absolute" |
| 53 | bottom="100%" |
| 54 | left="50%" |
| 55 | transform="translateX(-50%)" |
| 56 | mb={4} |
| 57 | gap={4} |
| 58 | direction="column" |
| 59 | align="center" |
| 60 | > |
| 61 | {actions.map( |
| 62 | ({ |
| 63 | id, |
| 64 | icon, |
| 65 | label, |
| 66 | onClick, |
| 67 | bgColor = 'fbuttons.blue', |
| 68 | color = 'white', |
| 69 | disabled = false, |
| 70 | }) => ( |
| 71 | <Tooltip key={id} content={label} showArrow positioning={{ placement: 'left' }}> |
| 72 | <IconButton |
| 73 | aria-label={label} |
| 74 | size="md" |
| 75 | rounded="full" |
| 76 | bgColor={bgColor} |
| 77 | color={color} |
| 78 | onClick={() => { |
| 79 | if (!disabled) { |
| 80 | onClick() |
| 81 | onClose() |
| 82 | } |
| 83 | }} |
| 84 | animation={`${fadeIn} 0.2s ease-out forwards`} |
| 85 | _hover={{ transform: 'scale(1.1)' }} |
| 86 | _active={{ transform: 'scale(0.95)' }} |
| 87 | disabled={disabled} |
| 88 | > |
| 89 | {icon} |
| 90 | </IconButton> |
| 91 | </Tooltip> |
| 92 | ), |
| 93 | )} |
| 94 | </Stack> |
| 95 | )} |
| 96 | |