src/components/Dialog.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

import React from "react";
import Button from "./Button";
import classNames from "classnames";

type DialogType = {
  children?: React.ReactNode;
  width?: "fit" | "full" | "1/2" | "1/3";
  cancelButtonText?: string;
  actionButtonText?: string;
  actionButtonColor?:
    | "violet"
    | "pink"
    | "red"
    | "orange"
    | "yellow"
    | "lime"
    | "cyan";
};

const Dialog = ({
  children,
  width,
  cancelButtonText,
  actionButtonText,
  actionButtonColor,
}: DialogType) => {
  return (
    <div
      className={classNames(
        "p-9 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 className="flex flex-col gap-4">
        {children}
        <div className="flex space-x-2 mx-auto">
          {cancelButtonText && (
            <button className="text-base">{cancelButtonText}</button>
          )}
          {actionButtonText && (
            <Button
              rounded="full"
              color={actionButtonColor && actionButtonColor}
            >
              <h3>{actionButtonText}</h3>
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default Dialog;