radixui dialog + specialized dialog

dialog.tsx

import * as DialogPrimitive from '@radix-ui/react-dialog'
import CloseIcon from 'components/icons/CloseIcon'
import React from 'react'

const classes = {
  overlay: /* tw: */ `fixed inset-0 bg-black/30 rdx-state-open:animate-fade-in rdx-state-closed:animate-fade-out`,
  content: /* tw: */ `fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 w-[calc(100%-40px)] h-[calc(100%-40px)] md:h-auto max-w-[900px] overflow-hidden rounded-md drop-shadow-card bg-white outline-none rdx-state-open:animate-fade-in rdx-state-closed:animate-fade-out`
}

type DialogProps = {
  trigger: React.ReactNode
  content: React.ReactNode
}

/**
 *
 * @summary This is a base component and will rarely be used directly.
 * Recommend creating a specialized component on top of it, like the `<DialogWithImage />`
 */
const Dialog = ({ trigger, content }: DialogProps) => {
  return (
    <DialogPrimitive.Root>
      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className={classes.overlay} />
        <DialogPrimitive.Content className={classes.content}>
          <DialogPrimitive.Close className="fixed top-6 right-6 z-10">
            <CloseIcon className="w-4 h-4 text-white" />
          </DialogPrimitive.Close>
          {content}
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

export default Dialog


//-------------------------------------------------------------------------------

import BlurImage from 'components/common/BlurImage'
import Dialog from 'components/common/Dialog'
import { cnMerge } from 'utils/cn-merge'

type DialogWithImageProps = {
  image: React.ComponentProps<typeof BlurImage>
} & React.ComponentProps<typeof Dialog>

const DialogWithImage = ({
  content,
  image,
  ...props
}: DialogWithImageProps) => {
  return (
    <Dialog
      {...props}
      content={
        <div className="flex flex-col-reverse h-full md:flex-row">
          <div className="overflow-y-auto py-10 px-8 h-full max-h-[800px] md:w-1/2">
            {content}
          </div>
          <div className="relative shrink-0 h-[200px] bg-gray-1 md:w-1/2 md:h-auto">
            <BlurImage
              {...image}
              layout={image.layout ?? 'fill'}
              className={cnMerge(['object-cover', image.className])}
              sizes="(min-width: 1024px) 450px, (min-width: 768px) 50vw, 100vw"
            />
          </div>
        </div>
      }
    />
  )
}

export default DialogWithImage