80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import classNames from "classnames";
|
|
import classes from "./classes.module.scss";
|
|
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
|
|
import React from "react";
|
|
import Typography, { ETypo } from "../Typography";
|
|
|
|
import { XMarkIcon } from "@heroicons/react/24/outline";
|
|
import IconButton, { EIconButtonVariant } from "../IconButton";
|
|
|
|
type IProps = {
|
|
className?: string;
|
|
isOpen: boolean;
|
|
onClose?: () => void;
|
|
children?: React.ReactNode;
|
|
title?: string;
|
|
firstButton?: {
|
|
text: string;
|
|
onClick?: () => void;
|
|
rightIcon?: React.ReactNode;
|
|
leftIcon?: React.ReactNode;
|
|
};
|
|
secondButton?: {
|
|
text: string;
|
|
onClick?: () => void;
|
|
rightIcon?: React.ReactNode;
|
|
leftIcon?: React.ReactNode;
|
|
};
|
|
fullwidth?: boolean;
|
|
fullscreen?: boolean;
|
|
};
|
|
|
|
export default function Modal(props: IProps) {
|
|
const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = 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"],
|
|
)}>
|
|
<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
|
|
variant={EButtonVariant.PRIMARY}
|
|
styleType={EButtonStyleType.OUTLINED}
|
|
leftIcon={firstButton.leftIcon}
|
|
rightIcon={firstButton.rightIcon}
|
|
onClick={firstButton.onClick}>
|
|
{firstButton.text}
|
|
</Button>
|
|
)}
|
|
{secondButton && (
|
|
<Button
|
|
variant={EButtonVariant.PRIMARY}
|
|
styleType={EButtonStyleType.CONTAINED}
|
|
leftIcon={secondButton.leftIcon}
|
|
rightIcon={secondButton.rightIcon}
|
|
onClick={secondButton.onClick}>
|
|
{secondButton.text}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|