vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add image preview modal for product thumbnails in product index page

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-17 13:11:16 +07:00
parent a761540447
commit eca45258a1
1 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/pages/admin/master/product/index.tsx
View File

@ -24,8 +24,11 @@ import {
AlertDialogMedia,
AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { X } from 'lucide-react';
export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {
const [selectedImage, setSelectedImage] = useState<string | null>(null);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
const [productToDelete, setProductToDelete] = useState<Product | null>(null);
@ -80,11 +83,16 @@ export default function ProductIndex({ products, categories }: { products: Produ
return (
<div className="flex items-center">
{product.thumbnail_url ? (
<img
src={product.thumbnail_url}
alt={product.name}
className="h-12 w-12 rounded-lg object-cover border border-border/50 shadow-sm"
/>
<button
onClick={() => setSelectedImage(product.thumbnail_url || null)}
className="h-12 w-12 rounded-lg overflow-hidden border border-border/50 shadow-sm hover:opacity-80 transition-opacity"
>
<img
src={product.thumbnail_url}
alt={product.name}
className="h-full w-full object-cover"
/>
</button>
) : (
<div className="h-12 w-12 rounded-lg bg-muted flex items-center justify-center border border-border/50">
<span className="text-[10px] text-muted-foreground uppercase font-semibold">N/A</span>
@ -277,6 +285,24 @@ export default function ProductIndex({ products, categories }: { products: Produ
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<Dialog open={!!selectedImage} onOpenChange={() => setSelectedImage(null)}>
<DialogContent className="max-w-3xl p-0 overflow-hidden border-none bg-transparent shadow-none">
<div className="relative group">
<img
src={selectedImage || ''}
alt="Preview"
className="w-full h-auto max-h-[80vh] object-contain rounded-lg"
/>
<button
onClick={() => setSelectedImage(null)}
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>
</div>
);
}