Merge pull request #84 from MargoMarm/features/SliderForExercisesPage

Features/slider for exercises page
MargoMarm · Sep 24, 2023 · 3480dc1 · 3480dc1
2 parents 725867b + 908b6de
commit 3480dc1
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 72 deletions.
diff --git a/src/components/ExercisesItem/ExercisesItem.styled.js b/src/components/ExercisesItem/ExercisesItem.styled.js
@@ -5,9 +5,13 @@ export const Item = styled.li`
   margin-bottom: 20px;
 
   &:last-child {
-    margin-bottom: 80px;
+    margin-bottom: 0px;
   }
 
+  // &:nth-child(10) {
+  //   margin-bottom: 0;
+  // }
+
   ${mq.tablet} {
     flex-basis: calc((100% - 32px) / 3);
     margin-bottom: 0;

diff --git a/src/components/ExercisesItemList/ExercisesItemList.jsx b/src/components/ExercisesItemList/ExercisesItemList.jsx
@@ -11,7 +11,17 @@ import { getExercises } from '../../redux/exercises/operations';
 
 import { setCurrentTitle } from '../../redux/exerciseFilters/slice';
 
-export const ExercisesList = () => {
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import { nanoid } from '@reduxjs/toolkit';
+
+const ExercisesList = () => {
   const dispatch = useDispatch();
 
   const handleGetExercises = (params, name) => {
@@ -23,20 +33,41 @@ export const ExercisesList = () => {
   let category = useSelector(selectFilter);
   let filters = useSelector(selectItems);
 
+  const array = filters.filter(item => item.filter === category);
+
+  const chunkedFilters = [];
+  for (let i = 0; i < array.length; i += 10) {
+    chunkedFilters.push(array.slice(i, i + 10));
+  }
+
   return (
-    <ExercisesItemList>
-      {filters
-        .filter(item => item.filter === category)
-        .map(({ filter, name, imgURL, _id }) => (
-          <ExercisesItem
-            handleGetExercises={handleGetExercises}
-            key={_id}
-            imgURL={imgURL}
-            name={capitalizeWord(name)}
-            filter={filter}
-          />
-        ))}
-    </ExercisesItemList>
+    <Swiper
+      modules={[Navigation, Pagination, Scrollbar, A11y]}
+      spaceBetween={50}
+      slidesPerView={1}
+      pagination={{ clickable: true }}
+      scrollbar={{ draggable: true }}
+      onSwiper={swiper => console.log(swiper)}
+      className="pagination"
+
+      // onSlideChange={() => console.log('slide change')}
+    >
+      {chunkedFilters.map(arr => (
+        <SwiperSlide key={nanoid()}>
+          <ExercisesItemList>
+            {arr.map(({ filter, name, imgURL, _id }) => (
+              <ExercisesItem
+                handleGetExercises={handleGetExercises}
+                key={_id}
+                imgURL={imgURL}
+                name={capitalizeWord(name)}
+                filter={filter}
+              />
+            ))}
+          </ExercisesItemList>
+        </SwiperSlide>
+      ))}
+    </Swiper>
   );
 };
 

diff --git a/src/components/ExercisesItemList/ExercisesItemList.styled.jsx b/src/components/ExercisesItemList/ExercisesItemList.styled.jsx
@@ -4,6 +4,8 @@ import { mq } from '../../utils/index';
 export const ExercisesItemList = styled.ul`
   margin-top: 40px;
 
+  padding-bottom: 52px;
+
   ${mq.tablet} {
     display: flex;
     flex-direction: row;

diff --git a/src/index.css b/src/index.css
@@ -87,3 +87,15 @@ button {
   --os-handle-perpendicular-size-active: 8px;
   --os-handle-perpendicular-size-hover: 8px;
 }
+
+/* стили слайдера для пагинации */
+
+.pagination .swiper-pagination-bullet {
+  width: 14px;
+  height: 14px;
+  background: #efede8;
+}
+
+.pagination .swiper-pagination-bullet-active {
+  background: #e6533c;
+}
diff --git a/src/pages/Exercises/Exercises.jsx b/src/pages/Exercises/Exercises.jsx
@@ -1,7 +1,11 @@
 import ExercisesItemList from '../../components/ExercisesItemList/ExercisesItemList';
 import ExercisesCategories from '../../components/ExercisesCategories/ExercisesCategories';
 import Title from '../../components/Title/Title';
-import { TitleThumb } from './Exercises.styled';
+import {
+  TitleThumb,
+  ExercisesContainer,
+  ExercisesListContainer,
+} from './Exercises.styled';
 
 import ProductsOrExercisesContainer from '../../components/ProductOrExerciseContainer/ProductOrExerciseContainer';
 import ProductsOrExercisesItem from '../../components/ProductsOrExercisesItem/ProductsOrExercisesItem';
@@ -21,63 +25,68 @@ const Exercises = () => {
 
   return (
     <>
-      {shouldGetFilters ? null : <ExercisesBtnBack />}
-      <TitleThumb>
-        {shouldGetFilters ? (
-          <Title
-            text={'Exercises'}
-            margin={{
-              top: {
-                desk: 72,
-                tab: 72,
-                mob: 40,
-              },
-              bt: {
-                tab: 32,
-                mob: 40,
-              },
-            }}
-          />
-        ) : (
-          <Title
-            text={currentTitle}
-            margin={{
-              top: {
-                desk: 16,
-                tab: 16,
-                mob: 12,
-              },
-              bt: {
-                tab: 32,
-                mob: 40,
-              },
-            }}
-          />
-        )}
+      <ExercisesContainer>
+        {shouldGetFilters ? null : <ExercisesBtnBack />}
+        <TitleThumb>
+          {shouldGetFilters ? (
+            <Title
+              text={'Exercises'}
+              margin={{
+                top: {
+                  desk: 72,
+                  tab: 72,
+                  mob: 40,
+                },
+                bt: {
+                  tab: 32,
+                  mob: 40,
+                },
+              }}
+            />
+          ) : (
+            <Title
+              text={currentTitle}
+              margin={{
+                top: {
+                  desk: 16,
+                  tab: 16,
+                  mob: 12,
+                },
+                bt: {
+                  tab: 32,
+                  mob: 40,
+                },
+              }}
+            />
+          )}
 
-        <ExercisesCategories />
-      </TitleThumb>
+          <ExercisesCategories />
+        </TitleThumb>
+      </ExercisesContainer>
       {shouldGetFilters ? (
-        <ExercisesItemList />
+        <ExercisesContainer>
+          <ExercisesItemList />
+        </ExercisesContainer>
       ) : (
-        <Scrollbar width={{ dt: '868' }}>
-          <ProductsOrExercisesContainer>
-            {items.map((item, i) => {
-              if (i < 20) {
-                return (
-                  <ProductsOrExercisesItem
-                    key={item._id}
-                    page="exercise"
-                    data={item}
-                  />
-                );
-              }
-              return null;
-            })}
-          </ProductsOrExercisesContainer>
-        </Scrollbar>
+        <ExercisesListContainer>
+          <Scrollbar width={{ dt: '868' }}>
+            <ProductsOrExercisesContainer>
+              {items.map((item, i) => {
+                if (i < 20) {
+                  return (
+                    <ProductsOrExercisesItem
+                      key={item._id}
+                      page="exercise"
+                      data={item}
+                    />
+                  );
+                }
+                return null;
+              })}
+            </ProductsOrExercisesContainer>
+          </Scrollbar>
+        </ExercisesListContainer>
       )}
-      ;
     </>
   );
 };

diff --git a/src/pages/Exercises/Exercises.styled.jsx b/src/pages/Exercises/Exercises.styled.jsx
@@ -1,6 +1,23 @@
 import styled from '@emotion/styled';
 import { mq } from '../../utils';
 
+import imgHomePage from '../../assets/images/imgHomePage';
+
+export const ExercisesContainer = styled.div`
+  padding-left: 20px;
+  padding-right: 20px;
+
+  ${mq.tablet} {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  ${mq.desktop} {
+    padding-left: 95px;
+    padding-right: 95px;
+  }
+`;
+
 export const TitleThumb = styled.div`
   ${mq.tablet} {
     display: flex;
@@ -9,12 +26,39 @@ export const TitleThumb = styled.div`
   }
 `;
 
-export const ExercisesWrapper = styled.div`
+export const ExercisesListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   padding: 40px 20px 80px 20px;
+  gap: 40px;
+
   ${mq.tablet} {
-    padding: 72px 32px 32px 32px;
+    gap: 32px;
+    padding: 72px 32px 48px 32px;
   }
+
   ${mq.desktop} {
-    padding: 72px 96px 92px 96px;
+    padding: 68px 81px 81px 96px;
+
+    gap: 28px;
+
+    background: linear-gradient(89deg, #040404 1.1%, rgba(4, 4, 4, 0) 70.79%);
+    background-repeat: no-repeat;
+    background-position: 100% 0;
+    background-size: 428px 716px;
+    background-image: url(${imgHomePage.imgDx1});
+
+    ${
+      '' /* @media (min-device-pixel-ratio: 2),
+      (-webkit-min-device-pixel-ratio: 2),
+      (min-resolution: 192dpi),
+      (min-resolution: 2dppx) {
+      & {
+        background-image: url(${imgProducts.imgDx2});
+      }
+
+      
+    } */
+    }
   }
 `;