feat: get trending games from api

src/renderer/src/components/hero/hero.tsx

@@ -1,20 +1,15 @@
 import { useNavigate } from "react-router-dom";
 import * as styles from "./hero.css";
 import { useEffect, useState } from "react";
-import { ShopDetails } from "@types";
-import {
-  buildGameDetailsPath,
-  getSteamLanguage,
-  steamUrlBuilder,
-} from "@renderer/helpers";
+import { TrendingGame } from "@types";
 import { useTranslation } from "react-i18next";
-
-const FEATURED_GAME_TITLE = "ELDEN RING";
-const FEATURED_GAME_ID = "1245620";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import { vars } from "@renderer/theme.css";
 
 export function Hero() {
-  const [featuredGameDetails, setFeaturedGameDetails] =
-    useState<ShopDetails | null>(null);
+  const [featuredGameDetails, setFeaturedGameDetails] = useState<
+    TrendingGame[] | null
+  >(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const { i18n } = useTranslation();
@@ -25,11 +20,7 @@ export function Hero() {
     setIsLoading(true);
 
     window.electron
-      .getGameShopDetails(
-        FEATURED_GAME_ID,
-        "steam",
-        getSteamLanguage(i18n.language)
-      )
+      .getTrendingGames()
       .then((result) => {
         setFeaturedGameDetails(result);
       })
@@ -38,41 +29,36 @@ export function Hero() {
       });
   }, [i18n.language]);
 
-  return (
-    <button
-      type="button"
-      onClick={() =>
-        navigate(
-          buildGameDetailsPath({
-            title: FEATURED_GAME_TITLE,
-            objectID: FEATURED_GAME_ID,
-            shop: "steam",
-          })
-        )
-      }
-      className={styles.hero}
-    >
-      <div className={styles.backdrop}>
-        <img
-          src="https://cdn2.steamgriddb.com/hero/95eb39b541856d43649b208b65b6ca9f.jpg"
-          alt={FEATURED_GAME_TITLE}
-          className={styles.heroMedia}
-        />
+  if (isLoading) {
+    return (
+      <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+        <Skeleton className={styles.hero} />
+      </SkeletonTheme>
+    );
+  }
 
-        <div className={styles.content}>
+  if (featuredGameDetails?.length) {
+    return featuredGameDetails.map((game, index) => (
+      <button
+        type="button"
+        onClick={() => navigate(game.uri)}
+        className={styles.hero}
+        key={index}
+      >
+        <div className={styles.backdrop}>
           <img
-            src={steamUrlBuilder.logo(FEATURED_GAME_ID)}
-            width="250px"
-            alt={FEATURED_GAME_TITLE}
+            src={game.background}
+            alt={game.description}
+            className={styles.heroMedia}
           />
 
-          {!isLoading && featuredGameDetails && (
-            <p className={styles.description}>
-              {featuredGameDetails?.short_description}
-            </p>
-          )}
+          <div className={styles.content}>
+            <p className={styles.description}>{game.description}</p>
+          </div>
         </div>
-      </div>
-    </button>
-  );
+      </button>
+    ));
+  }
+
+  return null;
 }

src/renderer/src/declaration.d.ts

@@ -18,6 +18,7 @@ import type {
   FriendRequestAction,
   UserFriends,
   UserBlocks,
+  TrendingGame,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -56,6 +57,7 @@ declare global {
       prevCursor?: number
     ) => Promise<{ results: CatalogueEntry[]; cursor: number }>;
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
+    getTrendingGames: () => Promise<TrendingGame[]>;
 
     /* Library */
     addGameToLibrary: (