Function Alert

gui/src/components/gui/Alert.tsx:69–102

({
  type = "info",
  size = "lg",
  className,
  children,
  ...props
}: AlertProps)

};

function Alert({
  type = "info",
  size = "lg",
  className,
  children,
  ...props
}: AlertProps) {
  const { Icon, border, text, iconColor } = ALERT_CONFIGS[type];

  const colorMap = {
    info: varWithFallback("info"),
    success: varWithFallback("success"),
    warning: varWithFallback("warning"),
    error: varWithFallback("error"),
  };

  return (
    <div
      className={cn(
        `flex flex-row items-start border-[0.5px] ${border} border-solid shadow-sm ${alertSizes[size]}`,
        className,
      )}
      style={{
        backgroundColor: `color-mix(in srgb, ${colorMap[type]} 20%, transparent)`,
      }}
      {...props}
    >
      <Icon className={`flex-shrink-0 ${iconColor} ${iconSizes[size]}`} />
      <div className="flex flex-1 flex-col">
        <div className={`${spacingSizes[size]} ${text}`}>{children}</div>
      </div>
    </div>
  );
}

export default Alert;