1- import React , { useCallback } from ' react' ;
2- import { AiOutlineClose } from ' react-icons/ai' ;
3- import Button from ' ./Button' ;
1+ import React , { useCallback } from " react" ;
2+ import { AiOutlineClose } from " react-icons/ai" ;
3+ import Button from " ./Button" ;
44
55interface ModalProps {
66 isOpen ?: boolean ;
@@ -21,19 +21,18 @@ const Modal: React.FC<ModalProps> = ({
2121 body,
2222 footer,
2323 actionLabel,
24- disabled
24+ disabled,
2525} ) => {
26-
2726 const handleClose = useCallback ( ( ) => {
28- if ( disabled ) {
27+ if ( disabled ) {
2928 return ;
3029 }
3130
3231 onClose ( ) ;
33- } , [ disabled , onClose ] ) ;
32+ } , [ disabled , onClose ] ) ;
3433
3534 const handleSubmit = useCallback ( ( ) => {
36- if ( disabled ) {
35+ if ( disabled ) {
3736 return ;
3837 }
3938
@@ -46,8 +45,8 @@ const Modal: React.FC<ModalProps> = ({
4645
4746 return (
4847 < >
49- < div
50- className = '
48+ < div
49+ className = "
5150 justify-center
5251 items-center
5352 flex
@@ -60,13 +59,12 @@ const Modal: React.FC<ModalProps> = ({
6059 focus:outline-none
6160 bg-neutral-800
6261 bg-opacity-70
63- ' >
64- < div
65- className = 'relative w-full lg:w-3/6 my-6 mx-auto lg:max-w-3xl h-full lg:h-auto'
66- >
67- { /* Content */ }
68- < div
69- className = '
62+ "
63+ >
64+ < div className = "relative w-full lg:w-3/6 my-6 mx-auto lg:max-w-3xl h-full lg:h-auto" >
65+ { /* Content */ }
66+ < div
67+ className = "
7068 h-full
7169 lg:h-auto
7270 border-0
@@ -79,54 +77,52 @@ const Modal: React.FC<ModalProps> = ({
7977 bg-black
8078 outline-none
8179 focus:outline-none
82- '
83- >
84- { /* Header */ }
85- < div
86- className = '
80+ "
81+ >
82+ { /* Header */ }
83+ < div
84+ className = "
8785 flex
8886 items-center
8987 justify-between
9088 p-10
9189 rounded-t
92- '
93- >
94- < h3 className = ' text-3xl font-semibold text-white' > { title } </ h3 >
95- < button
96- onClick = { handleClose }
97- className = '
90+ "
91+ >
92+ < h3 className = " text-3xl font-semibold text-white" > { title } </ h3 >
93+ < button
94+ onClick = { handleClose }
95+ className = "
9896 p-1
9997 ml-auto
10098 border-0
10199 text-white
102100 hover:opacity-70
103101 transition
104- '
105- >
106- < AiOutlineClose size = { 20 } />
107- </ button >
108- </ div >
109- { /* Body */ }
110- < div className = 'realtive p-10 flex-auto' >
111- { body }
112- </ div >
113- { /* Footer */ }
114- < div className = 'flex flex-col gap-2 p-10' >
115- < Button
116- disabled = { disabled }
117- label = { actionLabel }
118- secondary
119- fullWidth
120- large
121- onClick = { handleSubmit }
122- />
123- { footer }
124- </ div >
102+ "
103+ >
104+ < AiOutlineClose size = { 20 } />
105+ </ button >
106+ </ div >
107+ { /* Body */ }
108+ < div className = "realtive p-10 flex-auto" > { body } </ div >
109+ { /* Footer */ }
110+ < div className = "flex flex-col gap-2 p-10" >
111+ < Button
112+ disabled = { disabled }
113+ label = { actionLabel }
114+ secondary
115+ fullWidth
116+ large
117+ onClick = { handleSubmit }
118+ />
119+ { footer }
125120 </ div >
126121 </ div >
122+ </ div >
127123 </ div >
128124 </ >
129- )
130- }
125+ ) ;
126+ } ;
131127
132- export default Modal ;
128+ export default Modal ;
0 commit comments