Select Git revision
-
BREAKING CHANGE: changed icon names to PascalCase
BREAKING CHANGE: changed icon names to PascalCase
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Alert.tsx 1.50 KiB
import { clsx } from "clsx";
import Icon, { IconName } from "./Icon.tsx";
import Typography from "./Typography.tsx";
import { baseColorType } from "./utils/colors.ts";
import { borderColor, textColor } from "./utils/classes.ts";
type AlertProps = {
title: string;
message: string;
alertType?: baseColorType;
};
/**
* An interruptive pop-up showing important information
* Use sparingly
*
* @param title: string
* @param message: string
* @param alertType: "default" | "warning" | "positive" | "negative"
*/
const Alert = ({ title, message, alertType = "primary" }: AlertProps) => {
const icon = {
primary: "InfoCircle",
warning: "AttentionCircle",
positive: "CheckmarkCircle",
negative: "CrossCircle",
};
const baseClass =
"flex flex-row items-start py-[13px] px-[15px] rounded-[8px] w-min border-l-8 border-y-0 border-r-0 bg-baseWhite dark:bg-mediumGrey shadow-2xl";
return (
<div className={clsx(baseClass, borderColor(alertType))}>
<Icon name={icon[alertType] as IconName} color={alertType} />
<div className="flex flex-col w-[400px] ml-[13px]">
<Typography
text={title}
variant="paragraph"
customClass={textColor(alertType)}
customColor={true}
/>
<Typography text={message} variant="paragraph" />
</div>
{/* if used more often than below and in Modal, consider making it a CloseIcon */}
<Icon name="Cross" color="body" customClass="cursor-pointer" />
</div>
);
};
export default Alert;