feat: add tg api

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

@@ -0,0 +1,38 @@
+@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;
+
+    .content {
+      border-radius: 22px;
+
+      .description {
+        padding: 12px;
+        border-radius: 18px;
+        text-align: center;
+      }
+    }
+  }
+
+  .buttons {
+    display: flex;
+    gap: 6px;
+  }
+
+  .button {
+    flex: 1;
+  }
+}

src/components/modals/ActionModal/ActionModal.tsx

@@ -0,0 +1,62 @@
+import { AnimatePresence, motion } from "motion/react";
+import { useTranslation } from "react-i18next";
+
+import SectionSurface from "../../surface/SectionSurface/SectionSurface";
+import ContentSurface from "../../surface/ContentSurface/ContentSurface";
+import LightSurface from "../../surface/LightSurface/LightSurface";
+import Button from "../../atoms/Button/Button";
+import classes from "./ActionModal.module.css";
+
+type WithConfirm = {
+  onConfirm: () => void;
+  confirmText: string;
+};
+
+type WithoutConfirm = {
+  onConfirm?: never;
+  confirmText?: never;
+};
+
+type Props = (WithConfirm | WithoutConfirm) & {
+  open: boolean;
+  description: string;
+  onClose: () => void;
+};
+
+export default function ActionModal({ open, description, onClose, onConfirm, confirmText }: Props) {
+  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>
+  );
+}

src/components/modals/ActionModal/index.ts

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