add search suggestions and button to display results

BrandonWingerAir · Jan 16, 2024 · 1573288 · 1573288
1 parent 75da73a
commit 1573288
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 27 deletions.
diff --git a/components/GameCard.vue b/components/GameCard.vue
@@ -1,18 +1,20 @@
 <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 class="h-full w-64 border flex flex-col text-center justify-end">
+    <div class="h-full mb-5 bg-transparent hover:bg-gray-200 flex justify-center">
+      <div class="flex">
+        <img 
+          :src="imgPath" 
+          alt="Game Artwork" 
+          class="transform hover:translate-x-6 hover:-translate-y-6 delay-50 duration-100 inline-block"
+        />
+      </div>
     </div>
-    <div class="text-lg">
-      {{ game?.name }}
+    <div class="text-lg pb-3">
+      <p>{{ game?.name }}</p>
     </div>
-    <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">
+    <!-- <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">
       {{ game?.summary }}
-    </p>
+    </p> -->
   </div>
 </template>
 
@@ -31,4 +33,18 @@ const props = defineProps({
 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>
+</script>
+
+<style>
+img {
+    max-height: 100%;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,7 +1,8 @@
 export default defineNuxtConfig({
   devtools: { enabled: false },
   modules: [
-    '@nuxtjs/tailwindcss'
+    '@nuxtjs/tailwindcss',
+    '@vueuse/nuxt'
   ],
   runtimeConfig: {
     apiKey: process.env.EXTERNAL_API_KEY,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.10.4",
+    "@vueuse/nuxt": "^10.7.2",
     "nuxt": "^3.9.1",
     "vue": "^3.4.10",
     "vue-router": "^4.2.5"

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,18 +1,28 @@
 <template>
   <div>
     <div class="flex flex-col py-10">
-      <div>
-        <h2 class="text-2xl font-bold text-center">Nuxt 3 Game Search</h2>
+      <div class="mb-10">
+        <h2 class="text-2xl font-bold text-center">Video Games List</h2>
       </div>
-      <div class="flex justify-center items-center h-32">
-        <input 
-          class="px-2 py-1 border border-gray-800 rounded-md min-w-64"
-          v-model="searchTerm"
-          type="text"
-          placeholder="Search..."
-        />
+      <div class="flex justify-center mb-8">
+        <div class="border rounded-md border-neutral-400">
+          <input 
+            class="px-2 py-1 border-0 min-w-64"
+            v-model="searchTerm"
+            type="text"
+            placeholder="Game Title..."
+          />
+          <div v-if="data?.results[0] && !showResults" class="px-2 pb-2">
+            <ul v-for="game in data?.results">
+              <li class="py-1">{{ game.name }}</li>
+            </ul>
+          </div>
+        </div>
+        <button @click="showResults = !showResults" class="h-9 px-4 bg-cyan-500 text-white font-semibold rounded-lg">
+          Search
+        </button>
       </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-if="showResults" 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">
           <GameCard :game="game"></GameCard>
         </div>
@@ -26,12 +36,13 @@ import type { Response } from '~/types/Response';
 
 const searchTerm = ref('');
 
+const debouncedSearchTerm = refDebounced(searchTerm, 300);
+
 const url = computed(() => {
-  return `api/games/search?query=${searchTerm.value}`;
+  return `api/games/search?query=${debouncedSearchTerm.value}`;
 });
 
-
-
 const { data } = await useFetch<Response>(url);
-console.log(data);
+
+const showResults = ref(false);
 </script>