HeaderBanner() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/HeaderBanner.tsx lines 51–123

export const HeaderBanner = ({ variant, title, description, onDismiss }: HeaderBannerProps) => {
  const { banner: bannerStyles, icon: iconStyles } = variantStyles[variant]
  const Icon = variant === 'danger' ? CriticalIcon : WarningIcon

  return (
    <motion.div
      {...bannerMotionProps}
      className={cn('relative border-b overflow-hidden', bannerStyles)}
      layout="position"
    >
      {/* Wrapped content for smooth reveal animation */}
      <div className="px-4 py-4 md:py-3 flex items-center md:justify-center">
        {/* Striped background */}
        <div
          className="absolute inset-0 opacity-[1.6%] dark:opacity-[0.8%]"
          style={{
            background: `repeating-linear-gradient(
              45deg,
              currentColor,
              currentColor 10px,
              transparent 10px,
              transparent 20px
            )`,
            maskImage: 'linear-gradient(to bottom, transparent 0%, black 90%)',
            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 90%)',
          }}
        />
        {/* Icon and text content */}
        <div
          className={cn(
            'relative items-start md:items-center flex flex-row gap-3 min-w-0',
            // Avoid collision with the dismiss button
            onDismiss && 'pr-7 md:px-7'
          )}
        >
          <Icon className={cn('flex-shrink-0 w-5 h-5 md:w-4 md:h-4', iconStyles)} />
          {/* Title and description */}
          <div
            className={cn(
              'flex flex-col md:flex-row gap-0.5 md:gap-1.5 text-balance md:flex-nowrap min-w-0 flex-1'
            )}
          >
            {/* Title */}
            <p className="text-sm text-foreground font-medium md:truncate">{title}</p>
            {/* Description */}
            <div className="flex flex-row items-center gap-1.5 min-w-0 md:flex-nowrap text-sm">
              <span className="hidden md:inline text-foreground-muted">·</span>
              {typeof description === 'string' ? (
                <p className="text-foreground-light md:truncate">{description}</p>
              ) : (
                <div className={cn('text-foreground-light md:truncate', linkStyles)}>
                  {description}
                </div>
              )}
            </div>
          </div>
        </div>

        {onDismiss && (
          <Button
            type="text"
            size="tiny"
            className="opacity-75 z-[1] flex-shrink-0 p-0.5 h-auto absolute right-5 md:right-4 top-1/2 -translate-y-1/2"
            onClick={onDismiss}
            aria-label="Dismiss banner"
          >
            <XIcon size={16} className="text-foreground" />
          </Button>
        )}
      </div>
    </motion.div>
  )
}