blob: 0258e88e189d788c08905da6fb0abddc9ccc143b (
plain)
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
|
import React from "react";
import Button from "./Button";
import classNames from "classnames";
type DialogType = {
message: string;
width?: "fit" | "full" | "1/2" | "1/3";
cancelButtonText?: string;
actionButtonText?: string;
actionButtonColor?:
| "violet"
| "pink"
| "red"
| "orange"
| "yellow"
| "lime"
| "cyan";
};
const Dialog = ({
message,
width,
cancelButtonText,
actionButtonText,
actionButtonColor,
}: DialogType) => {
return (
<div
className={classNames(
"px-8 py-4 dark:bg-slate-850 bg-white border-4 border-black shadow-[8px_8px_0px_rgba(0,0,0,1)] grid place-content-center",
{ "w-fit": width === "fit" },
{ "w-full": width === "full" },
{ "w-1/2": width === "1/2" },
{ "w-1/3": width === "1/3" }
)}
>
<div>
<h1 className="text-2xl mb-4">{message}</h1>
<div className="flex space-x-2 mx-auto">
{cancelButtonText && (
<button className="text-base">{cancelButtonText}</button>
)}
{actionButtonText && (
<Button
buttonText={actionButtonText}
rounded="full"
color={actionButtonColor && actionButtonColor}
/>
)}
</div>
</div>
</div>
);
};
export default Dialog;
|
