dify/web/app/components/base/drawer/index.tsx

'use client'
import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button'
import cn from '@/utils/classnames'

export type IDrawerProps = {
  title?: string
  description?: string
  dialogClassName?: string
  dialogBackdropClassName?: string
  panelClassName?: string
  children: React.ReactNode
  footer?: React.ReactNode
  mask?: boolean
  positionCenter?: boolean
  isOpen: boolean
  showClose?: boolean
  clickOutsideNotOpen?: boolean
  onClose: () => void
  onCancel?: () => void
  onOk?: () => void
  unmount?: boolean
}

export default function Drawer({
  title = '',
  description = '',
  dialogClassName = '',
  dialogBackdropClassName = '',
  panelClassName = '',
  children,
  footer,
  mask = true,
  positionCenter,
  showClose = false,
  isOpen,
  clickOutsideNotOpen,
  onClose,
  onCancel,
  onOk,
  unmount = false,
}: IDrawerProps) {
  const { t } = useTranslation()
  return (
    <Dialog
      unmount={unmount}
      open={isOpen}
      onClose={() => !clickOutsideNotOpen && onClose()}
      className={cn('fixed inset-0 z-[30] overflow-y-auto', dialogClassName)}
    >
      <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
        {/* mask */}
        <DialogBackdrop
          className={cn('fixed inset-0 z-[40]', mask && 'bg-black/30', dialogBackdropClassName)}
          onClick={() => {
            !clickOutsideNotOpen && onClose()
          }}
        />
        <div className={cn('relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}>
          <>
            <div className='flex justify-between'>
              {title && <DialogTitle
                as="h3"
                className="text-lg font-medium leading-6 text-text-primary"
              >
                {title}
              </DialogTitle>}
              {showClose && <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
                <XMarkIcon className='h-4 w-4 text-text-tertiary' onClick={onClose} />
              </DialogTitle>}
            </div>
            {description && <div className='mt-2 text-xs font-normal text-text-tertiary'>{description}</div>}
            {children}
          </>
          {footer || (footer === null
            ? null
            : <div className="mt-10 flex flex-row justify-end">
              <Button
                className='mr-2'
                onClick={() => {
                  onCancel && onCancel()
                }}>{t('common.operation.cancel')}</Button>
              <Button
                onClick={() => {
                  onOk && onOk()
                }}>{t('common.operation.save')}</Button>
            </div>)}
        </div>
      </div>
    </Dialog>
  )
}