пва

client/src/entities/product/ui/ProductCard.tsx

@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react'
 import { useCallback, useMemo, useRef } from 'react'
+import { useMediaQuery } from '@mui/material'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
 import CardMedia from '@mui/material/CardMedia'
 import Chip from '@mui/material/Chip'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useNavigate } from 'react-router-dom'
+import { Autoplay } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
 import type { Product } from '@/entities/product/model/types'
@@ -19,6 +20,7 @@ type Props = { product: Product; mediaHeight?: number; actions?: ReactNode }
 
 export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
   const navigate = useNavigate()
+  const isMobile = useMediaQuery('(max-width:600px)')
   const swiperRef = useRef<SwiperType | null>(null)
   const imageUrls = useMemo(() => {
     const fromImages = (product.images ?? [])
@@ -76,12 +78,14 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
     >
       <Box sx={{ position: 'relative' }}>
         {imageUrls.length ? (
-          <Box onMouseMove={onMouseMove} sx={{ height: mediaHeight, overflow: 'hidden' }}>
+          <Box onMouseMove={!isMobile ? onMouseMove : undefined} sx={{ height: mediaHeight, overflow: 'hidden' }}>
             <Swiper
               onSwiper={(s) => {
                 swiperRef.current = s
               }}
-              allowTouchMove={false}
+              modules={isMobile ? [Autoplay] : undefined}
+              autoplay={isMobile ? { delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true } : undefined}
+              allowTouchMove={!isMobile}
               style={{ width: '100%', height: mediaHeight }}
             >
               {imageUrls.map((url) => (
@@ -150,8 +154,8 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
         )}
       </Box>
 
-      <CardContent sx={{ flexGrow: 1, p: 2, '&:last-child': { pb: 2 } }}>
-        <Stack spacing={1.25}>
+      <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', p: 2, pb: 2 }}>
+        <Stack spacing={1.25} sx={{ flexGrow: 1 }}>
           {product.category && (
             <Chip
               label={product.category.name}
@@ -231,15 +235,15 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
           >
             {product.shortDescription ?? 'Описание появится позже.'}
           </Typography>
-
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 'auto', pt: 0.5 }}>
-            <Typography variant="h6" color="primary" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>
-              {formatPriceRub(product.priceCents)}
-            </Typography>
-            {actions}
-          </Box>
         </Stack>
-      </CardContent>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pt: 1.5 }}>
+          <Typography variant="h6" color="primary" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>
+            {formatPriceRub(product.priceCents)}
+          </Typography>
+          {actions}
+        </Box>
+      </Box>
     </Card>
   )
 }