Sticker Creator

sticker-creator/elements/ConfirmDialog.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as styles from './ConfirmDialog.scss';
+import { useI18n } from '../util/i18n';
+
+export type Props = {
+  readonly title: string;
+  readonly children: React.ReactNode;
+  readonly confirm: string;
+  readonly onConfirm: () => unknown;
+  readonly cancel?: string;
+  readonly onCancel: () => unknown;
+};
+
+export const ConfirmDialog = ({
+  title,
+  children,
+  confirm,
+  cancel,
+  onConfirm,
+  onCancel,
+}: Props) => {
+  const i18n = useI18n();
+  const cancelText = cancel || i18n('StickerCreator--ConfirmDialog--cancel');
+
+  return (
+    <div className={styles.base}>
+      <h1 className={styles.title}>{title}</h1>
+      <p className={styles.text}>{children}</p>
+      <div className={styles.bottom}>
+        <button className={styles.button} onClick={onCancel}>
+          {cancelText}
+        </button>
+        <button className={styles.buttonPrimary} onClick={onConfirm}>
+          {confirm}
+        </button>
+      </div>
+    </div>
+  );
+};