Create custom ImagePreviewDialog

Author: buberdds

src/components/dialog/image-preview-dialog.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Dialog, DialogPortal, DialogOverlay, DialogHeader, DialogTitle, DialogClose } from '../ui/dialog'
+
+type ImagePreviewDialogProps = {
+  className?: string
+  onClose: () => void
+  open: boolean
+  src: string
+  title?: string
+}
+
+export const ImagePreviewDialog: FC<ImagePreviewDialogProps> = ({ className, onClose, open, src, title }) => {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogPortal>
+        <DialogOverlay className="z-9999 bg-black/90" />
+        <DialogPrimitive.Content
+          data-slot="dialog-content"
+          className={cn(
+            'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 duration-200 z-9999',
+            className
+          )}
+        >
+          <DialogHeader className="flex flex-row items-center justify-between">
+            <DialogTitle className="text-md md:text-2xl font-bold text-white">{title}</DialogTitle>
+            <DialogClose className="opacity-80 transition-opacity hover:opacity-100 text-white">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </DialogClose>
+          </DialogHeader>
+          <img src={src} alt={title} className="max-w-[80dvw] max-h-[80dvh] object-contain" />
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  )
+}

src/components/dialog/index.tsx

@@ -0,0 +1 @@
+export { ImagePreviewDialog } from './image-preview-dialog'

src/stories/Dialog/Dialog.stories.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from '../../components/ui/button.tsx'
 import { expect, userEvent, within } from 'storybook/test'
 import { useState } from 'react'
+import { ImagePreviewDialog } from '../../components/dialog'
 
 const meta: Meta<typeof Dialog> = {
   title: 'Components/Dialog',
@@ -120,3 +121,21 @@ export const AlertDialog: Story = {
     )
   },
 }
+
+export const ImagePreview: Story = {
+  render: function ImagePreviewDialogExample() {
+    const [open, setOpen] = useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Image Preview</Button>
+        <ImagePreviewDialog
+          src="https://explorer.dev.oasis.io/Oasis%20Explorer%20-%20OpenGraph%20Banner.png"
+          title="Oasis Network"
+          open={open}
+          onClose={() => setOpen(false)}
+        />
+      </>
+    )
+  },
+}