Add custom Alert component

components/Alert/index.scss

@@ -0,0 +1,52 @@
+.AlertWrapper {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  z-index: 21;
+}
+
+.Alert {
+  background: white;
+  border-radius: $unit;
+  display: flex;
+  flex-direction: column;
+  gap: $unit;
+  min-width: $unit * 20;
+  max-width: $unit * 40;
+  padding: $unit * 4;
+
+  .description {
+    font-size: $font-regular;
+    line-height: 1.26;
+  }
+
+  .buttons {
+    align-self: flex-end;
+  }
+
+  .Button {
+    font-size: $font-regular;
+    padding: ($unit * 1.5) ($unit * 2);
+    margin-top: $unit * 2;
+
+    &.btn-disabled {
+      background: $grey-90;
+      color: $grey-70;
+      cursor: not-allowed;
+    }
+
+    &:not(.btn-disabled) {
+      background: $grey-90;
+      color: $grey-40;
+
+      &:hover {
+        background: $grey-80;
+      }
+    }
+  }
+}

components/Alert/index.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import * as AlertDialog from "@radix-ui/react-alert-dialog"
+
+import "./index.scss"
+import Button from "~components/Button"
+import { ButtonType } from "~utils/enums"
+
+// Props
+interface Props {
+  open: boolean
+  title?: string
+  message: string
+  primaryAction?: () => void
+  primaryActionText?: string
+  cancelAction: () => void
+  cancelActionText: string
+}
+
+const Alert = (props: Props) => {
+  return (
+    <AlertDialog.Root open={props.open}>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="Overlay" onClick={props.cancelAction} />
+        <div className="AlertWrapper">
+          <AlertDialog.Content className="Alert">
+            {props.title ? <AlertDialog.Title>Error</AlertDialog.Title> : ""}
+            <AlertDialog.Description className="description">
+              {props.message}
+            </AlertDialog.Description>
+            <div className="buttons">
+              <AlertDialog.Cancel asChild>
+                <Button onClick={props.cancelAction}>
+                  {props.cancelActionText}
+                </Button>
+              </AlertDialog.Cancel>
+              {props.primaryAction ? (
+                <AlertDialog.Action onClick={props.primaryAction}>
+                  {props.primaryActionText}
+                </AlertDialog.Action>
+              ) : (
+                ""
+              )}
+            </div>
+          </AlertDialog.Content>
+        </div>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  )
+}
+
+export default Alert