This commit is contained in:
Veronika Smirnova
2025-07-28 10:21:23 +03:00
2 changed files with 32 additions and 10 deletions

View File

@ -1,12 +1,13 @@
"use client"
import { useState } from 'react'
import Image from 'next/image'
import { useMutation } from '@apollo/client'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { DELETE_PRODUCT } from '@/graphql/mutations'
import { Edit3, Trash2, Package, Eye, EyeOff } from 'lucide-react'
import { toast } from 'sonner'
@ -41,6 +42,7 @@ interface ProductCardProps {
export function ProductCard({ product, onEdit, onDeleted }: ProductCardProps) {
const [deleteProduct, { loading: deleting }] = useMutation(DELETE_PRODUCT)
const [imageDialogOpen, setImageDialogOpen] = useState(false)
const handleDelete = async () => {
try {
@ -80,15 +82,35 @@ export function ProductCard({ product, onEdit, onDeleted }: ProductCardProps) {
return (
<Card className="glass-card group relative overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-purple-500/20">
{/* Изображение товара */}
<div className="relative h-48 bg-white/5 overflow-hidden">
<div className="relative h-48 bg-white/5 overflow-hidden flex items-center justify-center">
{product.mainImage || product.images[0] ? (
<Dialog open={imageDialogOpen} onOpenChange={setImageDialogOpen}>
<DialogTrigger asChild>
<div className="cursor-zoom-in w-full h-full flex items-center justify-center">
<Image
src={product.mainImage || product.images[0]}
alt={product.name}
width={300}
height={200}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
className="w-full h-full object-contain transition-transform duration-300 group-hover:scale-110"
/>
</div>
</DialogTrigger>
<DialogContent className="glass-card max-w-4xl max-h-[90vh] p-2">
<DialogHeader>
<DialogTitle className="text-white">{product.name}</DialogTitle>
</DialogHeader>
<div className="flex items-center justify-center p-4">
<Image
src={product.mainImage || product.images[0]}
alt={product.name}
width={800}
height={600}
className="max-w-full max-h-[70vh] object-contain rounded-lg"
/>
</div>
</DialogContent>
</Dialog>
) : (
<div className="w-full h-full flex items-center justify-center">
<Package className="h-16 w-16 text-white/30" />

View File

@ -451,7 +451,7 @@ export function ProductForm({ product, onSave, onCancel }: ProductFormProps) {
alt={`Товар ${index + 1}`}
width={200}
height={150}
className="w-full aspect-square object-cover rounded-lg"
className="w-full aspect-square object-contain rounded-lg bg-white/5"
/>
{/* Индикатор главного изображения */}