image-preview.tsx•1.11 kB
import { Button } from "@repo/ui/components/ui/button";
import { Dialog, DialogContent } from "@repo/ui/components/ui/dialog";
import { X } from "lucide-react";
interface ImagePreviewProps {
src: string;
alt: string;
isOpen: boolean;
onClose: () => void;
}
export function ImagePreview({ src, alt, isOpen, onClose }: ImagePreviewProps) {
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-4xl p-0 overflow-hidden">
<div className="relative">
{/* Close button */}
<Button
variant="ghost"
size="icon"
className="absolute right-2 top-2 z-10 bg-background/80 hover:bg-background/90"
onClick={onClose}
>
<X className="h-4 w-4" />
</Button>
{/* Image */}
<div className="relative w-full max-h-[80vh] overflow-auto">
<img
src={src}
alt={alt}
className="w-full h-auto object-contain"
/>
</div>
</div>
</DialogContent>
</Dialog>
);
}