37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
interface ImagePreviewDialogProps {
|
|
imageUrl: string | null;
|
|
onClose: () => void;
|
|
}
|
|
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
|
|
import { X } from 'lucide-react';
|
|
import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/ui/dialog"
|
|
|
|
export function ImagePreviewDialog({ imageUrl, onClose }: ImagePreviewDialogProps) {
|
|
return (
|
|
<Dialog open={!!imageUrl} onOpenChange={() => onClose()}>
|
|
<DialogContent
|
|
className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none"
|
|
showCloseButton={false}
|
|
>
|
|
<VisuallyHidden>
|
|
<DialogTitle>Image preview</DialogTitle>
|
|
<DialogDescription>Preview of selected image</DialogDescription>
|
|
</VisuallyHidden>
|
|
|
|
<div className="relative group">
|
|
<img
|
|
src={imageUrl ?? undefined}
|
|
alt="Preview"
|
|
className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
|
|
/>
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 backdrop-blur-sm transition-all shadow-xl"
|
|
>
|
|
<X className="size-5" />
|
|
</button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |