Merge branch 'refactor'

client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx

@@ -1,15 +1,12 @@
 import { useRef } from 'react'
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
-import IconButton from '@mui/material/IconButton'
 import Stack from '@mui/material/Stack'
-import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { fetchAdminCatalogSlider } from '@/entities/catalog-slider/api/catalog-slider-api'
-import { deleteGalleryImage, fetchAdminGallery } from '@/entities/gallery/api/gallery-api'
+import { fetchAdminCatalogSlider } from '@/entities/catalog-slider'
+import { deleteGalleryImage, fetchAdminGallery, GalleryGrid } from '@/entities/gallery'
 import { uploadAdminProductImages } from '@/entities/product/api/product-api'
 import { formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'
 import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
@@ -120,51 +117,7 @@ export function AdminGalleryPage() {
         </Typography>
       )}
 
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
-          gap: 2,
-        }}
-      >
-        {items.map((item) => (
-          <Box
-            key={item.id}
-            sx={{
-              position: 'relative',
-              borderRadius: 1,
-              overflow: 'hidden',
-              border: 1,
-              borderColor: 'divider',
-              aspectRatio: '1',
-            }}
-          >
-            <Box
-              component="img"
-              src={item.url}
-              alt=""
-              sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-            />
-            <Tooltip title="Удалить из галереи">
-              <IconButton
-                size="small"
-                color="error"
-                sx={{
-                  position: 'absolute',
-                  top: 4,
-                  right: 4,
-                  bgcolor: 'background.paper',
-                  '&:hover': { bgcolor: 'error.light', color: 'error.contrastText' },
-                }}
-                disabled={deleteMut.isPending}
-                onClick={() => deleteMut.mutate(item.id)}
-              >
-                <DeleteOutlineOutlinedIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </Box>
-        ))}
-      </Box>
+      <GalleryGrid items={items} deleting={deleteMut.isPending} onDelete={(id) => deleteMut.mutate(id)} />
 
       {!galleryQuery.isLoading && items.length === 0 && (
         <Typography color="text.secondary">Пока нет загруженных изображений.</Typography>