base commit

client/src/pages/home/ui/HomePage.tsx

@@ -21,7 +21,7 @@ import Typography from '@mui/material/Typography'
 import { useQuery } from '@tanstack/react-query'
 import { fetchCategories, fetchPublicProducts } from '@/entities/product/api/product-api'
 import { ProductCard } from '@/entities/product/ui/ProductCard'
-import { AddToCartButton } from '@/features/cart/add-to-cart'
+import { ToggleCartIcon } from '@/features/cart/toggle-cart-icon'
 
 export function HomePage() {
   const [categorySlug, setCategorySlug] = useState<string>('')
@@ -124,8 +124,7 @@ export function HomePage() {
         <Stack
           direction={{ xs: 'column', md: 'row' }}
           spacing={2}
-          alignItems={{ md: 'center' }}
-          sx={{ flexWrap: { md: 'wrap' } }}
+          sx={{ alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
         >
           <FormControl sx={{ minWidth: 220 }} size="small">
             <InputLabel id="category-filter-label">Категория</InputLabel>
@@ -159,9 +158,7 @@ export function HomePage() {
         <Stack
           direction={{ xs: 'column', sm: 'row' }}
           spacing={1.5}
-          alignItems={{ sm: 'center' }}
-          justifyContent="space-between"
-          flexWrap="wrap"
+          sx={{ alignItems: { sm: 'center' }, justifyContent: 'space-between', flexWrap: 'wrap' }}
         >
           <Button variant="text" onClick={() => setMoreOpen((v) => !v)} sx={{ alignSelf: { xs: 'flex-start' } }}>
             {moreOpen ? 'Скрыть фильтры' : 'Фильтры и сортировка'}
@@ -188,8 +185,7 @@ export function HomePage() {
           <Stack
             direction={{ xs: 'column', md: 'row' }}
             spacing={2}
-            alignItems={{ md: 'center' }}
-            sx={{ mt: 2, flexWrap: { md: 'wrap' } }}
+            sx={{ mt: 2, alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
           >
             <FormControl sx={{ minWidth: 220 }} size="small">
               <InputLabel id="sort-label">Сортировка</InputLabel>
@@ -316,16 +312,12 @@ export function HomePage() {
           <Grid container spacing={2}>
             {products.map((p) => (
               <Grid size={{ xs: 12, sm: 6, md: 4 }} key={p.id}>
-                <ProductCard
-                  product={p}
-                  mediaHeight={mediaHeight}
-                  actions={<AddToCartButton productId={p.id} variant="contained" size="small" />}
-                />
+                <ProductCard product={p} mediaHeight={mediaHeight} actions={<ToggleCartIcon productId={p.id} />} />
               </Grid>
             ))}
           </Grid>
 
-          <Stack direction="row" justifyContent="center" sx={{ mt: 3 }}>
+          <Stack direction="row" sx={{ mt: 3, justifyContent: 'center' }}>
             <Pagination
               page={page}
               count={totalPages}