1 files changed, 55 insertions, 0 deletions
diff --git a/src/components/common/TypeConfirmationForm.tsx b/src/components/common/TypeConfirmationForm.tsx
new file mode 100644
index 0000000..1121fa7
--- /dev/null
+++ b/src/components/common/TypeConfirmationForm.tsx
@@ -0,0 +1,55 @@
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormField,
+  FormSubmitButton,
+  TextField,
+} from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+
+export function TypeConfirmationForm({
+  confirmationValue,
+  buttonLabel,
+  buttonVariant,
+  isLoading,
+  error,
+  onConfirm,
+  onClose,
+}: {
+  confirmationValue: string;
+  buttonLabel?: string;
+  buttonVariant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
+  isLoading?: boolean;
+  error?: string | Error;
+  onConfirm?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
+  if (!confirmationValue) {
+    return null;
+  }
+
+  return (
+    <Form onSubmit={onConfirm} error={getErrorMessage(error)}>
+      <p>
+        {formatMessage(messages.actionConfirmation, {
+          confirmation: confirmationValue,
+        })}
+      </p>
+      <FormField
+        label={formatMessage(labels.confirm)}
+        name="confirm"
+        rules={{ validate: value => value === confirmationValue }}
+      >
+        <TextField autoComplete="off" />
+      </FormField>
+      <FormButtons>
+        <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
+        <FormSubmitButton isLoading={isLoading} variant={buttonVariant}>
+          {buttonLabel || formatMessage(labels.ok)}
+        </FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}