Add event link to individual game page

Author: bilibilistack

client/src/pages/games/[id].tsx

@@ -5,6 +5,7 @@ import { SocialIcon } from "react-social-icons";
 
 import { GameEmbed } from "@/components/ui/GameEmbed";
 import { ItchEmbed } from "@/components/ui/ItchEmbed";
+import { useEvents } from "@/hooks/useEvents";
 import { useGame } from "@/hooks/useGames";
 
 export default function IndividualGamePage() {
@@ -17,6 +18,7 @@ export default function IndividualGamePage() {
     error,
     isError,
   } = useGame(router.isReady ? id : undefined);
+  const { data: eventsData } = useEvents({});
 
   if (isPending) {
     return (
@@ -55,6 +57,15 @@ export default function IndividualGamePage() {
   const gameEmbedID = game.itchGameEmbedID;
   const gameWidth = game.itchGameWidth;
   const gameHeight = game.itchGameHeight;
+  const eventID = game.event;
+  let eventName = "";
+  if (eventID && eventsData && Array.isArray(eventsData.items)) {
+    const eventObj = eventsData.items.find((e) => e.id === eventID);
+    eventName = eventObj ? eventObj.name : "";
+  }
+
+  console.log("eventID:", eventID);
+  console.log("eventsData:", eventsData);
 
   const completionLabels: Record<number, string> = {
     1: "WIP",
@@ -65,8 +76,6 @@ export default function IndividualGamePage() {
 
   const devStage = completionLabels[game.completion] ?? "Stage Unknown";
 
-  // TODO ADD EVENT
-  const event = "Game Jam November 2025";
   // TODO ADD ARTIMAGES
   const artImages: { src: string; alt: string }[] = [];
   // const artImages = [
@@ -173,7 +182,20 @@ export default function IndividualGamePage() {
                   <td className="py-1 pr-2 text-muted-foreground sm:py-2">
                     Event
                   </td>
-                  <td className="py-1 text-right sm:py-2">{event}</td>
+                  <td className="py-1 text-right sm:py-2">
+                    {eventID && eventName ? (
+                      <a
+                        href={`/events/${eventID}`}
+                        className="text-primary hover:underline"
+                      >
+                        {eventName}
+                      </a>
+                    ) : (
+                      <span className="text-muted-foreground">
+                        No upcoming event
+                      </span>
+                    )}
+                  </td>
                 </tr>
               </tbody>
             </table>