chore: sync with main

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

@@ -1,17 +1,14 @@
 import { useNavigate } from "react-router-dom";
 import * as styles from "./hero.css";
 import { useEffect, useState } from "react";
-import { ShopDetails } from "@types";
-import { buildGameDetailsPath, getSteamLanguage } from "@renderer/helpers";
+import { TrendingGame } from "@types";
 import { useTranslation } from "react-i18next";
-import { steamUrlBuilder } from "@shared";
-
-const FEATURED_GAME_TITLE = "ELDEN RING";
-const FEATURED_GAME_ID = "1245620";
+import Skeleton from "react-loading-skeleton";
 
 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();
@@ -22,11 +19,7 @@ export function Hero() {
     setIsLoading(true);
 
     window.electron
-      .getGameShopDetails(
-        FEATURED_GAME_ID,
-        "steam",
-        getSteamLanguage(i18n.language)
-      )
+      .getTrendingGames()
       .then((result) => {
         setFeaturedGameDetails(result);
       })
@@ -35,41 +28,32 @@ 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 <Skeleton className={styles.hero} />;
+  }
 
-        <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

@@ -21,6 +21,7 @@ import type {
   UserBlocks,
   UpdateProfileRequest,
   GameStats,
+  TrendingGame,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -60,6 +61,7 @@ declare global {
     ) => Promise<{ results: CatalogueEntry[]; cursor: number }>;
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
     getGameStats: (objectId: string, shop: GameShop) => Promise<GameStats>;
+    getTrendingGames: () => Promise<TrendingGame[]>;
 
     /* Library */
     addGameToLibrary: (