games page

app/(content)/(gaming)/games/[gameid]/page.tsx

+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { getGame } from "@/lib/igdb";
 import { IGame } from "@/types/igdb-types";
@@ -7,7 +8,6 @@ import Image from "next/image";
 export default async function GameDetail({ params }: { params: { gameid: string } }) {
     const data: IGame[] = await getGame(parseInt(params.gameid))
 
-    // onvert unix timestamp to date in this format: Feb 25, 2022
     const date = new Date(data[0].first_release_date * 1000).toLocaleDateString('en-US', {
         month: 'short',
         day: 'numeric',
@@ -15,7 +15,6 @@ export default async function GameDetail({ params }: { params: { gameid: string
     })
 
     const companies = data[0].involved_companies.map((company) => {
-        // put a comma between each company
         if (company !== data[0].involved_companies[0]) {
             return `, ${company.company.name}`
         }
@@ -47,13 +46,32 @@ export default async function GameDetail({ params }: { params: { gameid: string
                         </Card>
                     </div>
                     <div className="ml-6 md:ml-12 grid items-start gap-2">
-                        <h1>{data[0].name}</h1>
-                        <h1>released on {date} by {companies}</h1>
+                        <h1 className="text-2xl font-bold">{data[0].name}</h1>
+                        <h1>released on{' '}
+                            <span className="font-semibold">{date}</span> by{' '}
+                            <span className="font-semibold">{companies}</span>
+                        </h1>
                         <h1>{data[0].summary}</h1>
+                        <div className="mt-6 ">
+                            <h1>Genres</h1>
+                            <div className="flex flex-wrap gap-2">
+                                {data[0].genres.map((genre, i) => {
+                                    return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{genre.name}</Button>
+                                })}
+                            </div>
+                        </div>
+                        <div className="mt-6">
+                            <h1>Platforms</h1>
+                            <div className="flex flex-wrap gap-2">
+                                {data[0].platforms.map((platform, i) => {
+                                    return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{platform.name}</Button>
+                                })}
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div className="px-6 md:px-12">
-                    <div className='mt-6 border-b border-gray-400 dark:border-gray-200 ' />
+                    <div className="border-b border-gray-400 dark:border-gray-200" />
                     {/* comments */}
                 </div>
             </Card>

lib/config/dashboard.ts

@@ -12,35 +12,35 @@ export const dashboardConfig: DashboardConfig = {
             href: "/games",
             icon: "gamepad2",
         },
-        {
-            title: "Communities",
-            href: "/communities",
-            icon: "messagecircle",
-        },
-        {
-            title: "Notifications",
-            href: "/notifications",
-            icon: "bellring",
-        },
-        {
-            title: "Followers",
-            href: "/followers",
-            icon: "users",
-        },
+        // {
+        //     title: "Communities",
+        //     href: "/communities",
+        //     icon: "messagecircle",
+        // },
+        // {
+        //     title: "Notifications",
+        //     href: "/notifications",
+        //     icon: "bellring",
+        // },
+        // {
+        //     title: "Followers",
+        //     href: "/followers",
+        //     icon: "users",
+        // },
         {
             title: "My Profile",
             href: "",
             icon: "user",
         },
-        {
-            title: "Settings",
-            href: "/settings",
-            icon: "settings",
-        },
-        {
-            title: "Help",
-            href: "/help",
-            icon: "help",
-        },
+        // {
+        //     title: "Settings",
+        //     href: "/settings",
+        //     icon: "settings",
+        // },
+        // {
+        //     title: "Help",
+        //     href: "/help",
+        //     icon: "help",
+        // },
     ],
 }
\ No newline at end of file

lib/igdb.ts

@@ -78,8 +78,8 @@ export async function getGame(id: number): Promise<IGame[]> {
             'Authorization': `Bearer ${auth.access_token}`
         },
         body:
-            `fields *, cover.image_id, screenshots.image_id, involved_companies.company.name;
-            where total_rating_count > 3
+            `fields *, cover.image_id, screenshots.image_id, involved_companies.company.name, genres.name, platforms.name;
+            limit 1; where total_rating_count > 3
             & cover != null & total_rating != null & rating != null & age_ratings != null
             & id = ${id};`
     })

types/igdb-types.d.ts

@@ -28,7 +28,7 @@ export interface IGame {
     game_engines: number[];
     game_localizations: number[];
     game_modes: number[];
-    genres: number[];
+    genres: IGenre[];
     hypes: number;
     involved_companies: IInvolvedCompany[];
     keywords: number[];
@@ -36,7 +36,7 @@ export interface IGame {
     multiplayer_modes: number[];
     name: string;
     parent_game: string;
-    platforms: number[];
+    platforms: IPlatform[];
     player_perspectives: number[];
     ports: number[];
     rating: number;