Skip to content
Snippets Groups Projects
Select Git revision
  • 20ce96d2561c6913f1879d00b6fc154111c686a6
  • master default protected
  • gec-105-enable-linting
  • gec-95-add-filter-skymodel
  • add-coverage-badge
  • gec-95-migrate-filter-skymodel-utils
  • releases/1.6
  • releases/1.5
  • rap-457-implement-ci-v2
  • test_heroku
  • action-python-publish
  • v1.7.1
  • v1.7.0
  • v1.6.2
  • v1.6.1
  • v1.6.post1
  • v1.6
  • v1.5.1
  • v1.5.0
  • v1.4.11
  • v1.4.10
  • v1.4.9
  • v1.4.8
  • v1.4.7
  • v1.4.6
  • v1.4.5
  • v1.4.4
  • v1.4.3
  • v1.4.2
  • v1.4.1
  • v1.4.0
31 results

setup.py

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;