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 (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none">
<div className="relative w-full h-full">
<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-[90vw] h-[90vh] mx-auto">
{/* Navigation buttons */}
{onNavigate && (
<>
<Button
variant="ghost"
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')}
>
<ChevronLeft size={24} />
<ChevronLeft size={32} />
</Button>
<Button
variant="ghost"
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')}
>
<ChevronRight size={24} />
<ChevronRight size={32} />
</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
src={imageUrl}
alt="Full size image"