From eba36de46acb833db2fd7eb6d5c5057ec4bc1d56 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Fri, 27 Aug 2021 15:26:26 +0700
Subject: [PATCH] :hammer: refactor: add title to modal common

:%s
---
 pages/test.tsx                                |  2 +-
 .../ModalCommon/ModalCommon.module.scss       |  7 ++++-
 .../common/ModalCommon/ModalCommon.tsx        | 30 +++++++++----------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index 5f798909a..6bcd178f9 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -13,7 +13,7 @@ export default function Test() {
     <>
       <ButtonCommon onClick={onOpen}>open</ButtonCommon>
       <ModalCommon visible={visible} onClose={onClose} >
-				<div className="p-10">
+				<div className="">
 					Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod itaque, officia magni molestias! Architecto deserunt soluta laborum commodi nesciunt delectus similique temporibus distinctio? Facere eaque minima enim modi magni, laudantium, animi mollitia beatae repudiandae maxime labore error nesciunt, nisi est?
 				</div>
 			</ModalCommon>
diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss
index 3e13b0e27..de47d0293 100644
--- a/src/components/common/ModalCommon/ModalCommon.module.scss
+++ b/src/components/common/ModalCommon/ModalCommon.module.scss
@@ -6,10 +6,15 @@
         @apply flex justify-center items-center  min-h-screen;
         .modal{
             @apply inline-block align-bottom bg-white relative;
-            max-width: 50%;
+            max-width: 60rem;
             padding: 3.2rem;
             box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
             border-radius: 1.2rem;
+            .title{
+                padding: 0 0.8rem 0 0.8rem;
+                font-size: 3.2rem;
+                line-height: 4rem;
+            }
             .close{
                 @apply absolute;
                 &:hover{
diff --git a/src/components/common/ModalCommon/ModalCommon.tsx b/src/components/common/ModalCommon/ModalCommon.tsx
index fcca8a84a..2ed90a3b3 100644
--- a/src/components/common/ModalCommon/ModalCommon.tsx
+++ b/src/components/common/ModalCommon/ModalCommon.tsx
@@ -1,14 +1,16 @@
 import React, { useRef } from 'react'
 import { Close } from 'src/components/icons'
 import { useOnClickOutside } from 'src/utils/useClickOutSide'
-import s from "./ModalCommon.module.scss"
+import s from './ModalCommon.module.scss'
 interface Props {
   onClose: () => void
   visible: boolean
-	children:React.ReactNode
+  children: React.ReactNode
+  title?: string
+  maxWidth?:string
 }
 
-const ModalCommon = ({ onClose, visible,children }: Props) => {
+const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: Props) => {
   const modalRef = useRef<HTMLDivElement>(null)
   const clickOutSide = () => {
     onClose && onClose()
@@ -17,19 +19,17 @@ const ModalCommon = ({ onClose, visible,children }: Props) => {
   return (
     <>
       {visible && (
-        <div
-          className={s.background}
-        >
+        <div className={s.background}>
           <div className={s.warpper}>
-            <div
-              className={s.modal}
-              ref={modalRef}
-            >
-							<div className={s.close} onClick={clickOutSide}>
-								<Close/>
-							</div>
-							{children}
-						</div>
+            <div className={s.modal} ref={modalRef} style={{maxWidth}}>
+              <div className={s.top}>
+                <div className={s.title}>{title}</div>
+                <div className={s.close} onClick={clickOutSide}>
+                  <Close />
+                </div>
+              </div>
+              {children}
+            </div>
           </div>
         </div>
       )}