Skip to content
Snippets Groups Projects
Select Git revision
  • f951e4aa9e2d05cd16ef80f7063ee7c2deb97bcf
  • main default protected
  • fix-textinput-label-styling
  • feature/add_tabs
  • v2.9.0
  • v2.8.0
  • v2.7.0
  • v2.6.0
  • v2.5.0
  • v2.4.0
  • v2.3.0
  • v2.2.0
  • v2.1.1
  • v2.1.0
  • v2.0.0
  • v1.10.0
  • v1.9.1
  • v1.9.0
  • v1.8.4
  • v1.8.3
  • v1.8.2
  • v1.8.1
  • v1.8.0
  • v1.7.0
24 results

Alert.tsx

Blame
  • 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;