dify/web/app/components/base/grid-mask/index.tsx

import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import Style from './style.module.css'

type GridMaskProps = {
  children: React.ReactNode
  wrapperClassName?: string
  canvasClassName?: string
  gradientClassName?: string
}
const GridMask: FC<GridMaskProps> = ({
  children,
  wrapperClassName,
  canvasClassName,
  gradientClassName,
}) => {
  return (
    <div className={cn('relative bg-saas-background', wrapperClassName)}>
      <div
        className={cn('absolute inset-0 z-0 size-full opacity-70', canvasClassName, Style.gridBg)}
      />
      <div
        className={cn(
          'absolute z-1 size-full rounded-lg bg-grid-mask-background',
          gradientClassName,
        )}
      />
      <div className="relative z-2">{children}</div>
    </div>
  )
}

export default GridMask