feat: add header

src/components/modals/ActionModal/ActionModal.module.css

@@ -1,29 +1,11 @@
 @layer base {
-  .overlay {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-  }
+  .content {
+    border-radius: 22px;
 
-  .modal {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    width: 100%;
-    max-width: 320px;
-    padding: 13px;
-
-    .content {
-      border-radius: 22px;
-
-      .description {
-        padding: 12px;
-        border-radius: 18px;
-        text-align: center;
-      }
+    .description {
+      padding: 12px;
+      border-radius: 18px;
+      text-align: center;
     }
   }
 

src/components/modals/ActionModal/ActionModal.tsx

@@ -1,7 +1,6 @@
-import { AnimatePresence, motion } from "motion/react";
 import { useTranslation } from "react-i18next";
 
-import SectionSurface from "../../surface/SectionSurface/SectionSurface";
+import Modal from "../Modal/Modal";
 import ContentSurface from "../../surface/ContentSurface/ContentSurface";
 import LightSurface from "../../surface/LightSurface/LightSurface";
 import Button from "../../atoms/Button/Button";
@@ -27,36 +26,20 @@ export default function ActionModal({ open, description, onClose, onConfirm, con
   const { t } = useTranslation();
 
   return (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          className={classes.overlay}
-          initial={{ backdropFilter: "blur(0px)" }}
-          animate={{ backdropFilter: "blur(8px)" }}
-          exit={{ backdropFilter: "blur(0px)" }}
-          transition={{ duration: 0.2 }}
-        >
-          <SectionSurface
-            className={classes.modal}
-            exit={{ scale: 0 }}
-            transition={{ duration: 0.2, type: "spring" }}
-          >
-            <ContentSurface className={classes.content}>
-              <LightSurface className={classes.description}>{description}</LightSurface>
-            </ContentSurface>
-            <div className={classes.buttons}>
-              <Button variant="blue" onClick={onClose} className={classes.button}>
-                {t("actionModal.close")}
-              </Button>
-              {onConfirm != null && (
-                <Button variant="green" onClick={onConfirm} className={classes.button}>
-                  {confirmText}
-                </Button>
-              )}
-            </div>
-          </SectionSurface>
-        </motion.div>
-      )}
-    </AnimatePresence>
+    <Modal open={open} onClose={onClose}>
+      <ContentSurface className={classes.content}>
+        <LightSurface className={classes.description}>{description}</LightSurface>
+      </ContentSurface>
+      <div className={classes.buttons}>
+        <Button variant="blue" onClick={onClose} className={classes.button}>
+          {t("actionModal.close")}
+        </Button>
+        {onConfirm != null && (
+          <Button variant="green" onClick={onConfirm} className={classes.button}>
+            {confirmText}
+          </Button>
+        )}
+      </div>
+    </Modal>
   );
 }

src/components/modals/Modal/Modal.module.css

@@ -0,0 +1,19 @@
+@layer base {
+  .overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+  }
+
+  .modal {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    max-width: 320px;
+    padding: 13px;
+  }
+}

src/components/modals/Modal/Modal.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { AnimatePresence, motion } from "motion/react";
+
+import SectionSurface from "../../surface/SectionSurface/SectionSurface";
+import classes from "./Modal.module.css";
+
+type Props = {
+  open: boolean;
+  children: ReactNode;
+  onClose: () => void;
+};
+
+export default function Modal({ open, children, onClose }: Props) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          className={classes.overlay}
+          initial={{ backdropFilter: "blur(0px)" }}
+          animate={{ backdropFilter: "blur(8px)" }}
+          exit={{ backdropFilter: "blur(0px)" }}
+          transition={{ duration: 0.2 }}
+          onClick={onClose}
+        >
+          <SectionSurface
+            className={classes.modal}
+            exit={{ scale: 0 }}
+            transition={{ duration: 0.2, type: "spring" }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {children}
+          </SectionSurface>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/modals/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from "./Modal";