Adds Carousel and Serie layout

Author: Martin4TheWin

package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "@trendyol-js/react-carousel": "^2.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",

package.json

@@ -18,5 +18,4 @@ function App() {
     </BrowserRouter>
   );
 }
-
 export default App;

src/App.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const SeriesCard = ({ title }) => {
+  return (
+    <div className="Series-box">
+      <h4>{title}</h4>
+    </div>
+  );
+};
+
+SeriesCard.propTypes = {
+  title: PropTypes.string
+};
+
+export default SeriesCard;

src/components/LeagueContainer.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import SeriesCard from 'components/SeriesCard';
+
+const SeriesContainer = ({ series }) => {
+  console.log(series);
+  return (
+    <div className="Series">
+      {series &&
+        series.length &&
+        series.map((serie, index) => <SeriesCard key={index} title={serie?.full_name ?? ''} />)}
+    </div>
+  );
+};
+
+SeriesContainer.propTypes = {
+  series: PropTypes.array
+};
+
+export default SeriesContainer;

src/components/SeriesCard.jsx

@@ -1,42 +1,65 @@
 import 'App.css';
 import 'style.css';
-import LeagueContainer from 'components/LeagueContainer';
+import LeagueCard from 'components/LeagueCard';
+import { Carousel } from '@trendyol-js/react-carousel';
 import { useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { http } from 'http';
+import SeriesContainer from 'components/SeriesContainer';
+
+function handleClick() {
+  window.location.href = '/';
+}
 
 const GamePage = () => {
   const params = useParams();
   const [gameName, setGameName] = useState(params.gameName);
   const [leagues, setLeagues] = useState([]);
+  const [resize, setResize] = useState(window.innerWidth);
 
   useEffect(async () => {
     const { leagues: response, name } = await http(
       `https://api.pandascore.co/videogames/${params.gameName}`
     );
     setGameName(name);
     setLeagues(
-      response.map(({ image_url, name }) => {
-        return { image: image_url, title: name };
+      response.map(({ image_url, name, series }) => {
+        return { image: image_url, title: name, series };
       })
     );
   }, []);
+  useEffect(() => {
+    function handleResize() {
+      setResize(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <div>
       <div className="sidenav">
         <h4 className="sidenav-title">Series</h4>
-        <button className="Homebtn" onClick={clickFun}>
+        <button className="Homebtn" onClick={handleClick}>
           Home
         </button>
+        <SeriesContainer series={leagues.map(({ series }) => series).flat()} />
       </div>
       <div className="main">
         <h1 className="Title">{gameName.toUpperCase()}</h1>
-        <LeagueContainer leagues={leagues} />
+        {leagues.length && !!resize && (
+          <Carousel className="Carousel" responsive={false} dynamic={false}>
+            {leagues.map(({ image, title }, index) => (
+              <LeagueCard key={index} title={title ?? ''} image={image} />
+            ))}
+          </Carousel>
+        )}
       </div>
     </div>
   );
 };
-function clickFun() {
-  window.location.href = '/';
-}
+
 export default GamePage;

src/components/SeriesContainer.jsx

@@ -13,6 +13,26 @@ h3 {
   -webkit-text-stroke-width: 0.5px;
   -webkit-text-stroke-color: rgb(255, 255, 255);
 }
+.Carousel {
+  border-style: none;
+}
+
+.Carousel > div > button[data-direction*='right'],
+.Carousel > div > button[data-direction*='left'] {
+  border-color: #17171b;
+  cursor: pointer;
+  margin: 60px 4px 0 4px;
+  width: 30px;
+  height: 30px;
+  background-size: cover;
+}
+button[data-direction*='left'] {
+  background: url(img/LArrow.png) no-repeat;
+}
+button[data-direction*='right'] {
+  background: url(img/RArrow.png) no-repeat;
+}
+
 /* From cssbuttons.io by @nikk7007 */
 .Homebtn {
   padding: 0.8em 1.8em;
@@ -62,6 +82,23 @@ h3 {
     'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 45px;
 }
+.Series {
+  height: content;
+  display: flex;
+  justify-content: center;
+  align-content: start;
+  flex-wrap: wrap;
+}
+.Series-box {
+  border-color: #17c3b2;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 15px;
+  padding: 0 2px 0 2px;
+  margin: 4px 2px 4px 2px;
+  font-size: 14px;
+  background-color: #108074;
+}
 .leagues {
   height: content;
   display: flex;
@@ -82,6 +119,11 @@ h3 {
   box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
   border-radius: 8px;
 }
+.league-box:hover {
+  outline-style: solid;
+  outline-color: radial-gradient(whitesmoke, #17171b);
+  box-shadow: none;
+}
 .games {
   height: content;
   display: flex;