82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import React from "react";
|
|
import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import Button, { EButtonSize, EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
|
|
import classNames from "classnames";
|
|
import IconButton from "../IconButton";
|
|
import useOpenable from "@Front/Hooks/useOpenable";
|
|
|
|
type IProps = {
|
|
variant: EAlertVariant;
|
|
title: string;
|
|
description: string;
|
|
icon?: React.ReactNode;
|
|
firstButton?: IButtonProps;
|
|
secondButton?: IButtonProps;
|
|
closeButton?: boolean;
|
|
fullWidth?: boolean;
|
|
};
|
|
|
|
export enum EAlertVariant {
|
|
INFO = "info",
|
|
SUCCESS = "success",
|
|
WARNING = "warning",
|
|
ERROR = "error",
|
|
NEUTRAL = "neutral",
|
|
}
|
|
|
|
const variantButtonMap: Record<EAlertVariant, EButtonVariant> = {
|
|
[EAlertVariant.INFO]: EButtonVariant.PRIMARY,
|
|
[EAlertVariant.SUCCESS]: EButtonVariant.SUCCESS,
|
|
[EAlertVariant.WARNING]: EButtonVariant.WARNING,
|
|
[EAlertVariant.ERROR]: EButtonVariant.ERROR,
|
|
[EAlertVariant.NEUTRAL]: EButtonVariant.NEUTRAL,
|
|
};
|
|
|
|
export default function Alert(props: IProps) {
|
|
const { isOpen, close } = useOpenable({ defaultOpen: true });
|
|
const { variant = EAlertVariant.INFO, title, description, firstButton, secondButton, closeButton, icon, fullWidth } = props;
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className={classNames(classes["root"], classes[variant], fullWidth && classes["fullwidth"])}>
|
|
<span className={classes["icon"]}>{icon ?? <InformationCircleIcon />}</span>
|
|
<div className={classes["content"]}>
|
|
<div className={classes["text-container"]}>
|
|
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
|
|
{title}
|
|
</Typography>
|
|
<Typography typo={ETypo.TEXT_MD_light} color={ETypoColor.COLOR_NEUTRAL_700}>
|
|
{description}
|
|
</Typography>
|
|
</div>
|
|
|
|
<div className={classes["button-container"]}>
|
|
{firstButton && (
|
|
<Button
|
|
{...firstButton}
|
|
size={firstButton.size ?? EButtonSize.MD}
|
|
variant={firstButton.variant ?? variantButtonMap[variant]}
|
|
styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}>
|
|
{firstButton.children}
|
|
</Button>
|
|
)}
|
|
{secondButton && (
|
|
<Button
|
|
{...secondButton}
|
|
size={secondButton.size ?? EButtonSize.MD}
|
|
variant={secondButton.variant ?? variantButtonMap[variant]}
|
|
styletype={secondButton.styletype ?? EButtonstyletype.OUTLINED}>
|
|
{secondButton.children}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{closeButton && <IconButton onClick={close} icon={<XMarkIcon />} />}
|
|
</div>
|
|
);
|
|
}
|