Alert Box

import { useEffect } from "react";
import styled from "styled-components";

export default function AlertBox({
  title,
  description,
  width = "360px",
  height = "300px",
  className,
  style,
  confirmText = "Ok",
  cancelText = "Cancel",
  onConfirm,
  onCancel,
}) {
  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.removeAttribute("style");
    };
  }, []);

  return (
    <Styled
      className={className}
      style={style}
      $maxHeight={height}
      $maxWidth={width}
    >
      <div className={"alert"}>
        {title && <div className={"title"}>{title}</div>}
        {description && <div className={"content "}>{description}</div>}

        <div className="footer">
          {onConfirm && (
            <div
              className="confirm"
              onClick={() => {
                onConfirm();
              }}
            >
              {confirmText}
            </div>
          )}
          {onCancel && (
            <div
              className="cancel"
              onClick={() => {
                onCancel();
              }}
            >
              {cancelText}
            </div>
          )}
        </div>
      </div>
    </Styled>
  );
}

const Styled = styled.div`
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: start;
  z-index: 999999;
  color: var(--txt-normal);
  .alert {
    top: 100px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: ${({ $maxWidth }) => $maxWidth};
    max-height: ${({ $maxHeight }) => $maxHeight};
    width: 100%;
    border-radius: 10px;
    position: relative;
    margin: 0 20px;
    padding: 30px 20px;
  }
  .title {
    font-size: 24px;
    color: ${({ $titleColor }) => $titleColor};
    line-height: 32px;
    text-align: center;
    font-weight: bolder;
    padding: 0 0 20px;
  }
  .content {
    flex: 1;
    overflow: auto;
    padding: 0 20px 20px 20px;
  }
  .footer {
    display: flex;
    justify-content: center;
    .confirm,
    .cancel {
      padding: 10px 20px;
      border-radius: 20px;
      cursor: pointer;
      user-select: none;
      min-width: 130px;
      text-align: center;
    }
    .confirm:active,
    .cancel:active {
      opacity: 0.8;
    }
    .confirm {
      background-color: var(--primary);
      color: #fff;
    }
    .cancel {
      margin-left: 20px;
      border: 1px solid var(--txt-normal);
    }
  }
`;

import { useState } from "react";
import AlertBox from "../../example/AlertBox";

export default function TestView() {
  const [isShowModal, setIsShowModal] = useState(false);
  return (
    <div className="test-view">
      <div
        onClick={() => {
          setIsShowModal(true);
        }}
      >
        Click me
      </div>
      {isShowModal && (
        <AlertBox
          title={"Lorem is simply dummy?"}
          onConfirm={() => {
            console.log("confirm");
          }}
          onCancel={() => {
            setIsShowModal(false);
          }}
          description={
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum"
          }
        />
      )}
    </div>
  );
}