add game card component and update example env

.env.example

@@ -1,2 +1,4 @@
+NUXT_APP_BASE_URL='/OPTIONAL_BASE_URL'
+
 EXTERNAL_API_KEY=YOUR_API_KEY
 API_BASE_URL=YOUR_BASE_URL

components/GameCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="h-128 w-64 border flex flex-col text-center">
+    <div class="mb-5 bg-transparent hover:bg-gray-200 inline-block">
+      <img 
+        :src="imgPath" 
+        alt="Game Artwork" 
+        class="transform hover:translate-x-6 hover:-translate-y-6 delay-50 duration-100 inline-block"
+      />
+    </div>
+    <div class="text-lg">
+      {{ game?.name }}
+    </div>
+    <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">
+      {{ game?.summary }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import type { Game } from '../types/Game';
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  game: {
+    type: Object as PropType<Game>
+  }
+});
+
+const config = useRuntimeConfig();
+
+const imgPath = computed(() => props.game?.image.original_url != null ? `${config.public.imgBaseUrl}${props.game.image.original_url}` : 'https://via.placeholder.com/300x500');
+</script>

nuxt.config.ts

@@ -5,6 +5,9 @@ export default defineNuxtConfig({
   ],
   runtimeConfig: {
     apiKey: process.env.EXTERNAL_API_KEY,
-    apiBaseUrl: process.env.API_BASE_URL
+    apiBaseUrl: process.env.API_BASE_URL,
+    public: {
+      imgBaseUrl: ''
+    }
   }
 })

pages/index.vue

@@ -14,21 +14,24 @@
       </div>
       <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 self-center gap-x-10 gap-y-10 mb-10">
         <div v-for="game in data?.results">
-          {{ game.name }}
+          <GameCard :game="game"></GameCard>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ApiResponse } from '~/types/ApiResponse';
+import type { Response } from '~/types/Response';
 
 const searchTerm = ref('');
 
 const url = computed(() => {
   return `api/games/search?query=${searchTerm.value}`;
 });
 
-const { data } = await useFetch<ApiResponse>(url);
+
+
+const { data } = await useFetch<Response>(url);
+console.log(data);
 </script>

types/Game.ts

@@ -9,5 +9,7 @@ export type Game = {
   release_date: string;
   aliases: string | null;
   summary: string;
-  screenshot_path: string;
+  image: {
+    original_url: string;
+  };
 }

types/ApiResponse.ts → types/Response.ts

@@ -1,6 +1,6 @@
 import type { Game } from "./Game";
 
-export type ApiResponse = {
+export type Response = {
   page: number;
   results: Game[];
   total_pages: number;