dify/web/app/components/base/upgrade-modal/index.tsx

'use client'

import type { ComponentType, ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
import styles from './style.module.css'

type UpgradeModalClassNames = {
  content?: string
  heroOverlay?: string
  body?: string
  icon?: string
  copy?: string
  title?: string
  description?: string
  footer?: string
}

type UpgradeModalProps = {
  open: boolean
  onOpenChange?: (open: boolean) => void
  Icon?: ComponentType<{ className?: string }>
  title: ReactNode
  description: ReactNode
  extraInfo?: ReactNode
  footer: ReactNode
  classNames?: UpgradeModalClassNames
}

export function UpgradeModal({
  open,
  onOpenChange,
  Icon,
  title,
  description,
  extraInfo,
  footer,
  classNames,
}: UpgradeModalProps) {
  return (
    <Dialog
      open={open}
      onOpenChange={onOpenChange}
    >
      <DialogContent className={cn(styles.surface, 'w-[580px] max-w-[480px] overflow-hidden rounded-2xl p-0', classNames?.content)}>
        <div className="relative">
          <div
            aria-hidden
            className={cn(styles.heroOverlay, 'pointer-events-none absolute inset-0', classNames?.heroOverlay)}
          />
          <div className={cn('px-8 pt-8', classNames?.body)}>
            {Icon && (
              <div className={cn(styles.icon, 'flex size-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-[5px]', classNames?.icon)}>
                <Icon className="size-6 text-text-primary-on-surface" />
              </div>
            )}
            <div className={cn('mt-6 space-y-2', classNames?.copy)}>
              <DialogTitle className={cn(styles.highlight, 'title-3xl-semi-bold', classNames?.title)}>
                {title}
              </DialogTitle>
              <DialogDescription className={cn('system-md-regular text-text-tertiary', classNames?.description)}>
                {description}
              </DialogDescription>
            </div>
            {extraInfo}
          </div>
        </div>

        <div className={cn('mt-10 mb-8 flex justify-end space-x-2 px-8', classNames?.footer)}>
          {footer}
        </div>
      </DialogContent>
    </Dialog>
  )
}