62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import { Box, Button } from '@mui/joy'
|
|
|
|
const ActionButton = ({ action, defaults, sx }) => {
|
|
if (!action) return null
|
|
|
|
const { label, sx: actionSx, ...props } = action
|
|
return (
|
|
<Button {...defaults} {...props} sx={{ ...sx, ...actionSx }}>
|
|
{label}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Consistent modal action row. Secondary actions are rendered first and the
|
|
* primary action is always the final, highest-emphasis control.
|
|
*/
|
|
const ModalActions = ({
|
|
primary,
|
|
secondary,
|
|
tertiary,
|
|
children,
|
|
stackOnMobile = false,
|
|
sx,
|
|
}) => {
|
|
const responsiveButtonStyles = stackOnMobile
|
|
? { '& > button': { width: { xs: '100%', sm: 'auto' } } }
|
|
: undefined
|
|
|
|
const layoutSx = {
|
|
display: 'flex',
|
|
flexDirection: stackOnMobile ? { xs: 'column-reverse', sm: 'row' } : 'row',
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'center',
|
|
gap: 1,
|
|
...responsiveButtonStyles,
|
|
...sx,
|
|
}
|
|
|
|
if (children) return <Box sx={layoutSx}>{children}</Box>
|
|
|
|
return (
|
|
<Box sx={layoutSx}>
|
|
<ActionButton
|
|
action={tertiary}
|
|
defaults={{ color: 'neutral', variant: 'plain' }}
|
|
sx={{ mr: { sm: 'auto' } }}
|
|
/>
|
|
<ActionButton
|
|
action={secondary}
|
|
defaults={{ color: 'neutral', variant: 'outlined' }}
|
|
/>
|
|
<ActionButton
|
|
action={primary}
|
|
defaults={{ color: 'primary', variant: 'solid' }}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default ModalActions
|