Create gallery-slider structure

.env.example

@@ -1,5 +0,0 @@
-MAIN_VITE_STEAMGRIDDB_API_KEY=YOUR_API_KEY
-MAIN_VITE_ONLINEFIX_USERNAME=YOUR_USERNAME
-MAIN_VITE_ONLINEFIX_PASSWORD=YOUR_PASSWORD
-MAIN_VITE_SENTRY_DSN=YOUR_SENTRY_DSN
-RENDERER_VITE_SENTRY_DSN=YOUR_SENTRY_DSN

src/renderer/src/pages/game-details/gallery-slider.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { ShopDetails } from "@types";
+import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
+import * as styles from "./game-details.css";
+
+
+export interface GallerySliderProps {
+    gameDetails: ShopDetails | null;
+  }
+
+export function GallerySlider({gameDetails}: GallerySliderProps){
+    const [imageIndex, setImageIndex] = useState<number>(0)
+
+    const showNextImage = () => {
+        setImageIndex((index:number) => {
+            if(gameDetails?.screenshots.length && index === (gameDetails?.screenshots.length - 1)) return 0
+
+            return index + 1
+        })
+    };
+    const showPrevImage = () => {
+        setImageIndex((index:number) => {
+            if(index === 0 && gameDetails?.screenshots) return gameDetails?.screenshots.length - 1
+            
+            return index - 1
+        })
+    };
+
+
+
+    return (
+        <>
+        {gameDetails?.screenshots && (
+            <div className={styles.gallerySliderContainer}>
+            <h2 className={styles.gallerySliderTitle}>Gallery</h2>
+            <img className={styles.gallerySliderImage} src={gameDetails?.screenshots[imageIndex].path_full} />
+            <button onClick={showPrevImage} className={styles.gallerySliderButton} style={{left: 0}}><ChevronLeftIcon className={styles.gallerySliderIcons}/></button>
+            <button onClick={showNextImage} className={styles.gallerySliderButton} style={{right: 0}}><ChevronRightIcon className={styles.gallerySliderIcons}/></button>
+        </div>
+        )}
+        </>
+    )
+
+}

src/renderer/src/pages/game-details/game-details.css.ts

@@ -79,6 +79,44 @@ export const descriptionContent = style({
   height: "100%",
 });
 
+export const gallerySliderContainer = style({
+  padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
+  width: "100%",
+  position: "relative",
+});
+
+export const gallerySliderTitle = style({
+  padding: `${SPACING_UNIT}px 0`,
+});
+
+export const gallerySliderImage = style({
+
+  width: "100%",
+  display: "block",
+});
+
+export const gallerySliderButton = style({
+  all: "unset",
+  display: "block",
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  padding: "1rem",
+  cursor: "pointer",
+  transition: "background-color 100ms ease-in-out",
+  margin: `${SPACING_UNIT * 8}px ${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px `,
+  ":hover": {
+    backgroundColor: "rgb(0,0,0, 0.2)",
+  },
+});
+
+export const gallerySliderIcons = style({
+  stroke: "white",
+  fill: "black",
+  width: "2rem",
+  height: "2rem",
+});
+
 export const contentSidebar = style({
   borderLeft: `solid 1px ${vars.color.border};`,
   width: "100%",

src/renderer/src/pages/game-details/game-details.tsx

@@ -36,6 +36,7 @@ import {
   DONT_SHOW_ONLINE_FIX_INSTRUCTIONS_KEY,
   OnlineFixInstallationGuide,
 } from "./installation-guides";
+import { GallerySlider } from "./gallery-slider";
 
 export function GameDetails() {
   const { objectID, shop } = useParams();
@@ -87,7 +88,7 @@ export function GameDetails() {
   useEffect(() => {
     getGame();
   }, [getGame, gameDownloading?.id]);
-
+  console.log(gameDetails)
   useEffect(() => {
     setGame(null);
     setIsLoading(true);
@@ -247,6 +248,8 @@ export function GameDetails() {
             <div className={styles.descriptionContent}>
               <DescriptionHeader gameDetails={gameDetails} />
 
+              <GallerySlider gameDetails={gameDetails} />
+
               <div
                 dangerouslySetInnerHTML={{
                   __html: gameDetails?.about_the_game ?? "",