38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import classes from "./classes.module.scss";
|
|
import classNames from "classnames";
|
|
import { InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
|
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
|
|
|
export type IProps = {
|
|
type: "info" | "warning" | "success" | "error";
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export default function MessageBox(props: IProps) {
|
|
const { className, type, children } = props;
|
|
return (
|
|
<div className={classNames(className, classes["root"], classes[type])}>
|
|
{getIcon(type)}
|
|
<div className={classes["content"]}>
|
|
<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
|
|
{children}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
function getIcon(type: IProps["type"]) {
|
|
switch (type) {
|
|
case "info":
|
|
return <InformationCircleIcon />;
|
|
case "warning":
|
|
return <ExclamationTriangleIcon />;
|
|
case "success":
|
|
return <InformationCircleIcon />;
|
|
case "error":
|
|
return <InformationCircleIcon />;
|
|
}
|
|
}
|
|
}
|