g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update image-viewer-modal.tsx

Browse Source
This commit is contained in:
NotII
2025-03-18 03:01:00 +01:00
parent 0aaa01bde1
commit d18f477214
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/modals/image-viewer-modal.tsx
View File

@@ -45,30 +45,32 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
return ( return (
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none"> <DialogContent className="p-0 border-none bg-black/80 max-w-[90vw] max-h-[90vh] [&>button]:text-white [&>button]:hover:text-gray-300 [&>button]:hover:bg-white/10 [&>button]:top-4 [&>button]:right-4">
<div className="relative w-full h-full"> <div className="relative w-[90vw] h-[90vh] mx-auto">
{/* Navigation buttons */}
{onNavigate && ( {onNavigate && (
<> <>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10" className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:text-gray-300 hover:bg-white/10 w-12 h-12"
onClick={handleNavigation('prev')} onClick={handleNavigation('prev')}
> >
<ChevronLeft size={24} /> <ChevronLeft size={32} />
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10" className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:text-gray-300 hover:bg-white/10 w-12 h-12"
onClick={handleNavigation('next')} onClick={handleNavigation('next')}
> >
<ChevronRight size={24} /> <ChevronRight size={32} />
</Button> </Button>
</> </>
)} )}
<div className="relative w-full h-full min-h-[60vh] flex items-center justify-center"> {/* Image container */}
<div className="w-full h-full flex items-center justify-center p-4">
<img <img
src={imageUrl} src={imageUrl}
alt="Full size image" alt="Full size image"