2024-03-29 11:21:25 +01:00

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 />;
}
}
}