game card component background colors & spacing

BrandonWingerAir · Jan 20, 2024 · 56b0233 · 56b0233
1 parent badfdd3
commit 56b0233
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 5 deletions.
diff --git a/components/GameCard.vue b/components/GameCard.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full w-64 border flex flex-col text-white text-center justify-end bg-neutral-600">
-    <div class="h-full mb-5 bg-transparent hover:bg-gray-200 flex justify-center">
+  <div class="h-full w-64 border flex flex-col text-center justify-end bg-neutral-300">
+    <div class="h-full bg-transparent hover:bg-gray-200 flex justify-center">
       <div class="flex">
         <img 
           :src="imgPath" 
@@ -9,7 +9,7 @@
         />
       </div>
     </div>
-    <div class="text-lg pb-3">
+    <div class="text-lg bg-white py-4">
       <p>{{ game?.name }}</p>
     </div>
     <!-- <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -12,7 +12,7 @@
 
   <div class="bg-white text-center py-7 border-t-4 border-t-red-600 border-b-2 md:border-b-4 border-b-neutral-900">
     <h2 class="mb-5">
-      Built with Nuxt 3 by <a href="https://www.brandonwinger-air.com" target="_blank" class="font-semibold">Brandon Winger-Air</a> using <a href="https://www.giantbomb.com/api/" target="_blank" class="font-semibold">external API</a>.
+      A study project built with Nuxt 3 by <a href="https://www.brandonwinger-air.com" target="_blank" class="font-semibold">Brandon Winger-Air</a> using an <a href="https://www.giantbomb.com/api/" target="_blank" class="font-semibold">external API</a>.
     </h2>
 
     <hr width="325" class="mx-auto mb-4">

diff --git a/pages/index.vue b/pages/index.vue
@@ -37,6 +37,19 @@
           <div v-for="game in data?.results">
             <GameCard :game="game"></GameCard>
           </div>
+
+          <!-- TODO: Requires custom results pagination -->
+          <!-- <div v-if="data?.results.length" class="flex justify-center"> -->
+            <!-- <button v-if="!disablePrevious" @click="page--" class="px-4 py-2 text-m border rounded-lg">
+              Prev
+            </button>
+            <div class="px-4 py-2 text-m border rounded-lg">
+
+            </div>
+          <button v-if="!disableNext" @click="page++" class="px-4 py-2 text-m border rounded-lg">
+              Next
+            </button> -->
+          <!-- </div> -->
         </div>
         <div v-else class="mb-10 text-center">
           <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-10 gap-y-10 mb-10">
@@ -62,6 +75,17 @@ import type { Response } from '~/types/Response';
 
 const searchTerm = ref('');
 
+// TODO: Requires custom results pagination
+// const page = ref(1);
+
+// const disabledPrevious = computed(() => {
+//   return page.value === 1;
+// });
+
+// const disableNext = computed(() => {
+//   return page.value + 1 === data.value?.total_pages;
+// });
+
 const debouncedSearchTerm = refDebounced(searchTerm, 300);
 
 const url = computed(() => {

diff --git a/server/api/games/search.js b/server/api/games/search.js
@@ -2,5 +2,5 @@ export default defineEventHandler((event) => {
   const {query} = getQuery(event);
   const config = useRuntimeConfig();
 
-  return $fetch(`${config.apiBaseUrl}/search/?api_key=${config.apiKey}&query=${query}&format=json`);
+  return $fetch(`${config.apiBaseUrl}/search/?api_key=${config.apiKey}&query=${query}&format=json&limit=20`);
 });