game list and game detail view done

.env.sample

@@ -4,4 +4,7 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="file:./dev.db"
+DATABASE_URL="file:./dev.db"
\ No newline at end of file
+
+IMDB_CLIENT_ID="imdb-client-id"
+IMDB_AUTH="Bearer imdb-auth-id"
\ No newline at end of file

app/games/Game.tsx

+import Image from "next/image";
+import Link from "next/link";
+
+export default function Game({ id, name, cover }: { id: any, name: any, cover: any }) {
+    return (
+        <div>
+            <h1>{name}</h1>
+            <Link href={`/games/${id}`}>
+                <Image src={"https:" + cover.url} alt={name} width={200} height={200} />
+            </Link>
+        </div>
+    )
+}

app/games/[gameid]/loading.tsx

+export default function Loading() {
+    return (
+        <div>
+            <h1>Game Loading...</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/games/[gameid]/page.tsx

+import Image from "next/image";
+
+type DetailView = {
+    id: number;
+    name: string;
+    cover: { url: string };
+    summary: string;
+}
+
+type DetailViewArray = DetailView[];
+
+
+
+export default async function GameDetail({ params }: { params: any }) {
+    const res = await fetch("https://api.igdb.com/v4/games", {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
+            'Authorization': `${process.env.IMDB_AUTH}`,
+        },
+        body: `fields name,cover.*,summary; where cover != null; where id = ${params.gameid};`,
+    });
+    const data: DetailViewArray = await res.json()
+
+    return (
+        <div>
+            Game Detail
+            <h1>{data[0].name}</h1>
+            <Image src={"https:" + data[0].cover.url} alt={data[0].name} width={200} height={200} priority />
+            <p>{data[0].summary}</p>
+        </div>
+    )
+}

app/games/loading.tsx

+export default function Loading() {
+    return (
+        <div>
+            <h1>Games Loading...</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/games/page.tsx

+import Game from "./Game";
+
+type DetailView = {
+    id: number;
+    name: string;
+    cover: { url: string };
+    summary: string;
+}
+
+type DetailViewArray = DetailView[];
+
+export default async function GamesList() {
+    const res = await fetch("https://api.igdb.com/v4/games", {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
+            'Authorization': `${process.env.IMDB_AUTH}`,
+        },
+        body: `fields name,cover.*; limit 10; where cover != null;`,
+    });
+    const data: DetailViewArray = await res.json()
+
+    return (
+        <div>
+            Games List Page
+            {data.map((game: any) => (
+                <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
+            ))}
+        </div>
+    )
+}

next.config.js

@@ -3,6 +3,9 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  images: {
+    domains: ["images.igdb.com"]
+  }
 }
 
 module.exports = nextConfig