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 04:25:21 +01:00
parent 20c6f94e86
commit 54e7a6d95a
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useEffect } from "react";
@@ -45,7 +45,17 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<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">
<DialogContent className="p-0 border-none bg-black/90 max-w-[90vw] max-h-[90vh] overflow-hidden">
{/* Close button */}
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="absolute top-4 right-4 z-50 bg-black/40 hover:bg-black/60 text-white rounded-full border border-white/20"
>
<X size={18} />
</Button>
<div className="relative w-[90vw] h-[90vh] mx-auto">
{/* Navigation buttons */}
{onNavigate && (
@@ -53,18 +63,18 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
<Button
variant="ghost"
size="icon"
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"
className="absolute left-4 top-1/2 -translate-y-1/2 z-50 bg-black/40 hover:bg-black/60 text-white rounded-full w-10 h-10 border border-white/20"
onClick={handleNavigation('prev')}
>
<ChevronLeft size={32} />
<ChevronLeft size={24} />
</Button>
<Button
variant="ghost"
size="icon"
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"
className="absolute right-4 top-1/2 -translate-y-1/2 z-50 bg-black/40 hover:bg-black/60 text-white rounded-full w-10 h-10 border border-white/20"
onClick={handleNavigation('next')}
>
<ChevronRight size={32} />
<ChevronRight size={24} />
</Button>
</>
)}