Merge pull request #109 from game-node-app/dev

Dev
game-node-app · Aug 10, 2024 · d8c34b4 · d8c34b4
2 parents 27de1ef + 7cfa2e7
commit d8c34b4
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/src/components/game/info/carousel/GameInfoCarousel.tsx b/src/components/game/info/carousel/GameInfoCarousel.tsx
@@ -4,6 +4,7 @@ import { Game } from "@/wrapper/server";
 import GameGridItem from "@/components/game/figure/GameGridItem";
 import { Flex, Skeleton, Text } from "@mantine/core";
 import CenteredLoading from "@/components/general/CenteredLoading";
+import useOnMobile from "@/components/general/hooks/useOnMobile";
 
 interface IGameInfoCarouselProps extends CarouselProps {
     isLoading: boolean;
@@ -47,7 +48,14 @@ const buildErrorView = () => {
     );
 };
 
-const GameInfoCarousel = ({ games, isLoading, isError, ...others }: IGameInfoCarouselProps) => {
+const GameInfoCarousel = ({
+    games,
+    isLoading,
+    isError,
+    ...others
+}: IGameInfoCarouselProps) => {
+    const onMobile = useOnMobile();
+
     if (isError) {
         return buildErrorView();
     }
@@ -58,12 +66,17 @@ const GameInfoCarousel = ({ games, isLoading, isError, ...others }: IGameInfoCar
 
     return (
         <Carousel
-            slideSize={"65%"}
+            slideSize={{
+                base: "65%",
+                lg: "15%",
+            }}
             height={"fit-content"}
             align="start"
-            slideGap={"xs"}
-            withControls={false}
-            withIndicators={false}
+            slideGap={{
+                base: "xs",
+                lg: "md",
+            }}
+            withControls={!onMobile}
             dragFree
             {...others}
         >