diff options
Diffstat (limited to 'src/components/common/ConfirmationForm.tsx')
| -rw-r--r-- | src/components/common/ConfirmationForm.tsx | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/src/components/common/ConfirmationForm.tsx b/src/components/common/ConfirmationForm.tsx new file mode 100644 index 0000000..b909ef5 --- /dev/null +++ b/src/components/common/ConfirmationForm.tsx @@ -0,0 +1,42 @@ +import { Box, Button, Form, FormButtons, FormSubmitButton } from '@umami/react-zen'; +import type { ReactNode } from 'react'; +import { useMessages } from '@/components/hooks'; + +export interface ConfirmationFormProps { + message: ReactNode; + buttonLabel?: ReactNode; + buttonVariant?: 'primary' | 'quiet' | 'danger'; + isLoading?: boolean; + error?: string | Error; + onConfirm?: () => void; + onClose?: () => void; +} + +export function ConfirmationForm({ + message, + buttonLabel, + buttonVariant, + isLoading, + error, + onConfirm, + onClose, +}: ConfirmationFormProps) { + const { formatMessage, labels, getErrorMessage } = useMessages(); + + return ( + <Form onSubmit={onConfirm} error={getErrorMessage(error)}> + <Box marginY="4">{message}</Box> + <FormButtons> + <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button> + <FormSubmitButton + data-test="button-confirm" + isLoading={isLoading} + variant={buttonVariant} + isDisabled={false} + > + {buttonLabel || formatMessage(labels.ok)} + </FormSubmitButton> + </FormButtons> + </Form> + ); +} |