Skip to content
Snippets Groups Projects
Select Git revision
  • 0577b9357a535582abed99d099c5c03419980f54
  • master default protected
  • L2SDP-LIFT
  • L2SDP-1113
  • HPR-158
5 results

tech_ddr_stratixiv.vhd

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;