From 17fc11f1cd779f699ce3d388d15a033c008feb66 Mon Sep 17 00:00:00 2001
From: Reynaldo <reynaldo.borges@leniolabs.com>
Date: Thu, 19 Aug 2021 13:53:25 -0400
Subject: [PATCH] [feat/home-slider], Adding slider

---
 .../project-card-list/ProjectCardList.js      | 160 +++++++++---------
 .../project-card-list.style.js                |   2 +-
 2 files changed, 78 insertions(+), 84 deletions(-)

diff --git a/components/project-card-list/ProjectCardList.js b/components/project-card-list/ProjectCardList.js
index 76420ea..341e321 100644
--- a/components/project-card-list/ProjectCardList.js
+++ b/components/project-card-list/ProjectCardList.js
@@ -8,94 +8,88 @@ import "swiper/swiper-bundle.css";
 import "swiper/components/navigation/navigation.min.css";
 import "swiper/components/pagination/pagination.min.css";
 import "swiper/components/scrollbar/scrollbar.min.css";
-// import styled from "styled-components";
-// import { Swiper, SwiperSlide } from "swiper/react";
-// import { SectionTitle } from "../../projects/home/home.style";
-// import NextIcon from "../../projects/svg-components/next-icon";
-// import PrevIcon from "../../projects/svg-components/prev-icon";
+import styled from "styled-components";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { SectionTitle } from "../../projects/home/home.style";
+import NextIcon from "../../projects/svg-components/next-icon";
+import PrevIcon from "../../projects/svg-components/prev-icon";
 
 SwiperCore.use([Navigation, Pagination, Scrollbar, Controller]);
-// const breakpoints = {
-//   240: {
-//     slidesPerView: 1
-//   },
-//   768: {
-//     slidesPerView: 2
-//   },
-//   1024: {
-//     slidesPerView: 3
-//   }
-// };
-// const Container = styled.div`
-//   display: flex;
-//   justify-content: space-between;
-// `;
-// const ControlContainer = styled.div`
-//   display: flex;
-//   align-items: center;
-// `;
-// const ButtonSlide = styled.button`
-//   border: none;
-//   background: #00000000;
-//   padding: 4;
-// `;
+const breakpoints = {
+  240: {
+    slidesPerView: 1
+  },
+  768: {
+    slidesPerView: 2
+  },
+  1024: {
+    slidesPerView: 3
+  }
+};
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+const ControlContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const ButtonSlide = styled.button`
+  border: none;
+  background: #00000000;
+  padding: 4;
+`;
 const ProjectCardList = ({ list }) => {
-  // const [swiper, setSwiper] = useState(null);
-  // const [isBeginning, setIsBeginning] = useState(true);
-  // const [isEnd, setIsEnd] = useState(false);
+  const [swiper, setSwiper] = React.useState(null);
+  const [isBeginning, setIsBeginning] = React.useState(true);
+  const [isEnd, setIsEnd] = React.useState(false);
 
   return (
-    // <>
-    //   <Container>
-    //     <SectionTitle>Latest researches</SectionTitle>
-    //     <ControlContainer>
-    //       <ButtonSlide
-    //         onClick={() => {
-    //           swiper.slidePrev();
-    //           setIsBeginning(swiper.isBeginning);
-    //           setIsEnd(swiper.isEnd);
-    //         }}
-    //         style={{ cursor: `${isBeginning ? `not-allowed` : `pointer`}` }}>
-    //         <PrevIcon disabled={isBeginning} />
-    //       </ButtonSlide>
-    //       <ButtonSlide
-    //         onClick={() => {
-    //           swiper.slideNext();
-    //           setIsBeginning(swiper.isBeginning);
-    //           setIsEnd(swiper.isEnd);
-    //         }}
-    //         style={{ cursor: `${isEnd ? `not-allowed` : `pointer`}` }}>
-    //         <NextIcon disabled={isEnd} />
-    //       </ButtonSlide>
-    //     </ControlContainer>
-    //   </Container>
-    //   <ListContainer>
-    //     <Swiper
-    //       id="main"
-    //       scrollbar={{ draggable: true }}
-    //       // pagination={{ clickable: true }}
-    //       slidesPerView={3}
-    //       spaceBetween={50}
-    //       contoller={{ control: swiper }}
-    //       onSwiper={setSwiper}
-    //       breakpoints={breakpoints}>
-    //       {list.map((item) => {
-    //         const { key, ...rest } = item;
-    //         return (
-    //           <SwiperSlide key={key}>
-    //             <ProjectCard key={key} {...rest} />
-    //           </SwiperSlide>
-    //         );
-    //       })}
-    //     </Swiper>
-    //   </ListContainer>
-    // </>
-    <CardsContainer>
-      {list.map((item) => {
-        const { key, ...rest } = item;
-        return <ProjectCard key={key} {...rest} />;
-      })}
-    </CardsContainer>
+    <>
+      <Container>
+        <SectionTitle>Latest researches</SectionTitle>
+        <ControlContainer>
+          <ButtonSlide
+            onClick={() => {
+              swiper.slidePrev();
+              setIsBeginning(swiper.isBeginning);
+              setIsEnd(swiper.isEnd);
+            }}
+            style={{ cursor: `${isBeginning ? `not-allowed` : `pointer`}` }}>
+            <PrevIcon disabled={isBeginning} />
+          </ButtonSlide>
+          <ButtonSlide
+            onClick={() => {
+              swiper.slideNext();
+              setIsBeginning(swiper.isBeginning);
+              setIsEnd(swiper.isEnd);
+            }}
+            style={{ cursor: `${isEnd ? `not-allowed` : `pointer`}` }}>
+            <NextIcon disabled={isEnd} />
+          </ButtonSlide>
+        </ControlContainer>
+      </Container>
+      <ListContainer>
+        <Swiper
+          id="main"
+          scrollbar={{ draggable: true }}
+          // pagination={{ clickable: true }}
+          slidesPerView={3}
+          spaceBetween={50}
+          contoller={{ control: swiper }}
+          onSwiper={setSwiper}
+          breakpoints={breakpoints}>
+          {list.map((item) => {
+            const { key, ...rest } = item;
+            return (
+              <SwiperSlide key={key}>
+                <ProjectCard key={key} {...rest} />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+      </ListContainer>
+    </>
   );
 };
 
diff --git a/components/project-card-list/project-card-list.style.js b/components/project-card-list/project-card-list.style.js
index 4f392c7..6569687 100644
--- a/components/project-card-list/project-card-list.style.js
+++ b/components/project-card-list/project-card-list.style.js
@@ -6,7 +6,7 @@ export const ListContainer = styled.div`
   }
   @media (min-width: 240px) {
     .swiper-container {
-      width: 300px;
+      width: 330px;
     }
   }
   @media (min-width: 768px) {