✨ feat: Modal confirm modal info

:%s

src/components/common/ModalCommon/ModalCommon.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import { Close } from 'src/components/icons'
 import { useOnClickOutside } from 'src/utils/useClickOutSide'
 import s from './ModalCommon.module.scss'
-interface Props {
+export interface ModalCommonProps {
   onClose: () => void
   visible: boolean
   children: React.ReactNode
@@ -10,7 +10,7 @@ interface Props {
   maxWidth?:string
 }
 
-const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: Props) => {
+const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: ModalCommonProps) => {
   const modalRef = useRef<HTMLDivElement>(null)
   const clickOutSide = () => {
     onClose && onClose()

src/components/common/ModalConfirm/ModalConfirm.module.scss

@@ -0,0 +1,4 @@
+.footer{
+    margin-top: 4rem;
+    @apply flex justify-end items-center;
+}

src/components/common/ModalConfirm/ModalConfirm.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import ModalCommon, { ModalCommonProps } from '../ModalCommon/ModalCommon'
+import s from './ModalConfirm.module.scss'
+interface ModalConfirmProps extends ModalCommonProps {
+  okText?: String
+  cancelText?: String
+  onOk?: () => void
+  onCancel?: () => void
+}
+
+const ModalConfirm = ({
+  okText = 'Ok',
+  cancelText = 'cancel',
+  onOk,
+  onCancel,
+  children,
+  title = 'Confirm',
+  ...props
+}: ModalConfirmProps) => {
+  return (
+    <ModalCommon {...props} title={title}>
+      {children}
+      <div className={s.footer}>
+        <div className="mr-4">
+          <ButtonCommon onClick={onCancel} type="light"> {cancelText}</ButtonCommon>
+        </div>
+          <ButtonCommon onClick={onOk}>{okText}</ButtonCommon>
+      </div>
+    </ModalCommon>
+  )
+}
+
+export default ModalConfirm

src/components/common/ModalInfo/ModalInfo.module.scss

@@ -0,0 +1,4 @@
+.footer{
+    margin-top: 4rem;
+    @apply flex justify-end items-center;
+}

src/components/common/ModalInfo/ModalInfo.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import ModalCommon, { ModalCommonProps } from '../ModalCommon/ModalCommon'
+import s from './ModalInfo.module.scss'
+interface ModalInfoProps extends ModalCommonProps {
+  okText?: String
+  onOk?: () => void
+}
+
+const ModalInfo = ({
+  okText = 'Ok',
+  onOk,
+  children,
+  title = 'Confirm',
+  ...props
+}: ModalInfoProps) => {
+  return (
+    <ModalCommon {...props} title={title}>
+      {children}
+      <div className={s.footer}>
+          <ButtonCommon onClick={onOk}>{okText}</ButtonCommon>
+      </div>
+    </ModalCommon>
+  )
+}
+
+export default ModalInfo

src/components/common/index.ts

@@ -28,3 +28,5 @@ export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
 export { default as ModalCommon} from './ModalCommon/ModalCommon'
+export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
+export { default as ModalInfo} from "./ModalInfo/ModalInfo"