mirror of
https://github.com/xCyanGrizzly/DragonsStash.git
synced 2026-07-22 23:12:02 +00:00
feat(stls): add reusable ImageLightbox for full-size preview viewing
Radix Dialog-based lightbox (Esc / overlay / close button to dismiss), image shown object-contain capped to the viewport. No new dependencies. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
41
src/app/(app)/stls/_components/image-lightbox.tsx
Normal file
41
src/app/(app)/stls/_components/image-lightbox.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
interface ImageLightboxProps {
|
||||
src: string | null;
|
||||
alt?: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full-size, in-page preview viewer. Renders the image at native size capped
|
||||
* to the viewport (object-contain). Dismiss via the close button, Esc, or by
|
||||
* clicking the overlay.
|
||||
*/
|
||||
export function ImageLightbox({
|
||||
src,
|
||||
alt = "",
|
||||
open,
|
||||
onOpenChange,
|
||||
}: ImageLightboxProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-auto max-w-[95vw] border-0 bg-transparent p-0 shadow-none sm:max-w-[90vw]">
|
||||
<DialogTitle className="sr-only">Enlarged preview image</DialogTitle>
|
||||
{src && (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="mx-auto max-h-[88vh] w-auto max-w-full rounded-lg object-contain"
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user