beccad.js","5510","static/chunks/5510-f8db75f90a0352e6.js","3452","static/chunks/3452-96603d238b46c8fe.js","1622","static/chunks/1622-25079dc2091e2e1a.js","8173","static/chunks/8173-edae25e397a07dc6.js","9472","static/chunks/9472-fb74c129f74ca98e.js","6963","static/chunks/6963-63310243cbb22e14.js","365","static/chunks/365-a18877ac5d9b2d0e.js","8290","static/chunks/app/(docs)/docs/imagepreview/page-7bea7c46195af2c9.js"],"default"] 2d:T7b5,"use client"; import React, { useState } from "react"; import Image from "next/image"; import { X } from "lucide-react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; interface ImagePreviewProps { src: string; alt?: string; width: number; height: number; className?: string; } export default function ImagePreview({ src = "https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt = "Preview image", width = 400, height = 400, className = "cursor-pointer rounded-lg hover:opacity-90 transition-opacity", }: ImagePreviewProps) { const [isOpen, setIsOpen] = useState(false); return ( <> {alt}

setIsOpen(true)} />

Image Preview

Installation