-
Notifications
You must be signed in to change notification settings - Fork 6
/
ConfirmModal.tsx
100 lines (94 loc) · 2.41 KB
/
ConfirmModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import type { ReactNode } from 'react';
import { Button } from '.';
interface ConfirmModalProps {
children: ReactNode;
isOpen: boolean;
onConfirm: () => void;
onCancel: () => void;
saveText?: string;
cancelText?: string;
headerColor: string;
width?: number;
height?: number;
}
export function ConfirmModal(props: ConfirmModalProps) {
const {
saveText = 'Save',
cancelText = 'Cancel',
headerColor,
width,
height,
} = props;
if (!props.isOpen) {
return null;
}
return (
<>
<div
style={{
backgroundColor: 'hsla(0deg, 0%, 97%, 0.8)',
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
left: 0,
}}
/>
<div
style={{
backgroundColor: 'white',
width: width || '400px',
height: height || 'max-content',
margin: 'auto',
top: 0,
left: 0,
right: 0,
bottom: 0,
position: 'absolute',
borderWidth: 1,
borderColor: 'transparent',
borderRadius: '0.5rem',
boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
borderTop: `10px solid ${headerColor}`,
}}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
<div style={{ color: headerColor }}>{props.children}</div>
<div
style={{
borderTop: '2px solid rgb(247, 247, 247)',
padding: '10px 20px 10px 20px',
display: 'flex',
flexDirection: 'row-reverse',
gap: 10,
}}
>
<Button
onClick={props.onConfirm}
backgroundColor={{
basic: 'hsla(243deg, 75%, 58%, 1)',
hover: 'hsla(245deg, 58%, 50%, 1)',
}}
color={{ basic: 'white' }}
>
{saveText}
</Button>
<Button
onClick={props.onCancel}
backgroundColor={{
basic: 'hsla(0deg, 72%, 50%, 1)',
hover: 'hsla(0deg, 73%, 42%, 1)',
}}
color={{ basic: 'white' }}
>
{cancelText}
</Button>
</div>
</div>
</div>
</>
);
}