70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { XMarkIcon } from "@heroicons/react/24/outline";
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
|
|
import Button, { EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
|
|
import IconButton, { EIconButtonVariant } from "../IconButton";
|
|
import Typography, { ETypo } from "../Typography";
|
|
import classes from "./classes.module.scss";
|
|
|
|
type IProps = {
|
|
className?: string;
|
|
isOpen: boolean;
|
|
onClose?: () => void;
|
|
children?: React.ReactNode;
|
|
title?: string;
|
|
firstButton?: IButtonProps;
|
|
secondButton?: IButtonProps;
|
|
fullwidth?: boolean;
|
|
fullscreen?: boolean;
|
|
fullheight?: boolean;
|
|
};
|
|
|
|
export default function Modal(props: IProps) {
|
|
const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen, fullheight } = props;
|
|
|
|
if (!isOpen) return null;
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<div className={classes["backdrop"]} onClick={onClose} />
|
|
|
|
<div
|
|
className={classNames(
|
|
classes["content"],
|
|
className,
|
|
fullwidth && classes["fullwidth"],
|
|
fullscreen && classes["fullscreen"],
|
|
fullheight && classes["fullheight"],
|
|
)}>
|
|
<div className={classes["header"]}>
|
|
{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
|
|
<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon />} />
|
|
</div>
|
|
|
|
<div className={classNames(classes["children"], className)}>{children}</div>
|
|
|
|
<div className={classes["footer"]}>
|
|
{firstButton && (
|
|
<Button
|
|
{...firstButton}
|
|
variant={firstButton.variant ?? EButtonVariant.PRIMARY}
|
|
styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}
|
|
fullwidth={firstButton.fullwidth ?? true}>
|
|
{firstButton.children}
|
|
</Button>
|
|
)}
|
|
{secondButton && (
|
|
<Button
|
|
{...secondButton}
|
|
variant={secondButton.variant ?? EButtonVariant.PRIMARY}
|
|
styletype={secondButton.styletype ?? EButtonstyletype.CONTAINED}
|
|
fullwidth={secondButton.fullwidth ?? true}>
|
|
{secondButton.children}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|