Add carousel

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-image-gallery": "^1.2.8",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/components/Carousel.js

@@ -0,0 +1,62 @@
+import React from "react";
+import ImageGallery from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+
+import defaultImage from "../assets/images/default.jpg";
+
+const Carousel = (props) => {
+  console.log(props);
+
+  const renderScreenshots = () => {
+    return props.screenshots.map((screenshot, id) => {
+      return (
+        <li className="card_img_screen" key={id}>
+          <a href={screenshot} target="_blank" rel="noreferrer">
+            <img className="card__screenshots" src={screenshot} alt="game" />
+          </a>
+        </li>
+      );
+    });
+  };
+
+  const images = [
+    {
+      original:
+        "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80",
+      thumbnail:
+        "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80",
+    },
+    {
+      original:
+        "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80",
+      thumbnail:
+        "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80",
+    },
+    {
+      original:
+        "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80",
+      thumbnail:
+        "https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2942&q=80",
+    },
+  ];
+
+  const someComponent = (props) => {
+    // console.log(props.someProps.objectKey)
+    return <div>{/* {props.someProps.objectKey} */}</div>;
+  };
+
+  return (
+    <ImageGallery
+      items={images}
+      defaultImage={defaultImage}
+      showBullets={true}
+      showIndex={true}
+      showThumbnails={true}
+      lazyLoad={true}
+      showPlayButton={false}
+      renderCustomControls={someComponent}
+    />
+  );
+};
+
+export default Carousel;

src/components/GameDetail.js

@@ -1,6 +1,7 @@
 import React from "react";
 import getIconPlatform from "../services/getIconPlatform";
 import BtnGoBack from "./ui/BtnGoBack";
+import Carousel from "./Carousel";
 
 const GameDetail = (props) => {
   // console.log(props);
@@ -28,17 +29,17 @@ const GameDetail = (props) => {
     });
   };
 
-  const renderScreenshots = () => {
-    return props.gameDetail.screenshots.map((screenshot, id) => {
-      return (
-        <li className="card_img_screen" key={id}>
-          <a href={screenshot} target="_blank" rel="noreferrer">
-            <img className="card__screenshots" src={screenshot} alt="game" />
-          </a>
-        </li>
-      );
-    });
-  };
+  // const renderScreenshots = () => {
+  //   return props.gameDetail.screenshots.map((screenshot, id) => {
+  //     return (
+  //       <li className="card_img_screen" key={id}>
+  //         <a href={screenshot} target="_blank" rel="noreferrer">
+  //           <img className="card__screenshots" src={screenshot} alt="game" />
+  //         </a>
+  //       </li>
+  //     );
+  //   });
+  // };
 
   return (
     <>
@@ -81,8 +82,9 @@ const GameDetail = (props) => {
             <p className="detail-text">{props.gameDetail.released}</p>
           </div>
 
-          <h3 className="filterTitle">Screenshots: </h3>
-          <ul className="screenshotUl">{renderScreenshots()}</ul>
+          {/* <h3 className="filterTitle">Screenshots: </h3>
+          <ul className="screenshotUl">{renderScreenshots()}</ul> */}
+          <Carousel screenshots={props.gameDetail.screenshots} />
         </section>
       </article>
     </>

src/stylesheets/VideoGamesApp.scss

@@ -9,5 +9,6 @@
 @import "components/filters";
 @import "components/resetbutton";
 @import "components/pagination";
+@import "components/carousel";
 @import "components/footer";
 @import "components/ui/btngoback";