feat(ui): game carousel

pages/store/index.vue

@@ -38,7 +38,7 @@
               class="relative mx-auto flex max-w-xl flex-col items-center text-center"
             >
               <h3 class="text-base/7 font-semibold text-blue-300">
-                Newly added
+                Recently added
               </h3>
               <h2
                 class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
@@ -59,82 +59,33 @@
       </VueSlide>
 
       <template #addons>
-        <CarouselPagination class="py-2" :items="recent"/>
+        <CarouselPagination class="py-2" :items="recent" />
       </template>
     </VueCarousel>
+
+    <!-- recently updated -->
+    <div class="px-4 sm:px-12 py-4">
+      <h1 class="text-zinc-100 text-2xl font-bold font-display">Recently updated</h1>
+      <NuxtLink class="text-blue-600 font-semibold"
+        >Explore more &rarr;</NuxtLink
+      >
+      <div class="mt-4">
+        <GameCarousel
+          v-if="updated"
+          :items="updated.map((e) => e.game)"
+          :min="24"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 const headers = useRequestHeaders(["cookie"]);
 const { data: recent } = await useFetch("/api/v1/store/recent", { headers });
+const { data: updated } = await useFetch("/api/v1/store/updated", { headers });
 
 useHead({
   title: "Store",
 });
-
-const categories = [
-  {
-    name: "New Arrivals",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-01.jpg",
-  },
-  {
-    name: "Productivity",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-02.jpg",
-  },
-  {
-    name: "Workspace",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-04.jpg",
-  },
-  {
-    name: "Accessories",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-05.jpg",
-  },
-  {
-    name: "Sale",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-03.jpg",
-  },
-];
-const collections = [
-  {
-    name: "Handcrafted Collection",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-01.jpg",
-    imageAlt:
-      "Brown leather key ring with brass metal loops and rivets on wood table.",
-    description:
-      "Keep your phone, keys, and wallet together, so you can lose everything at once.",
-  },
-  {
-    name: "Organized Desk Collection",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-02.jpg",
-    imageAlt:
-      "Natural leather mouse pad on white desk next to porcelain mug and keyboard.",
-    description:
-      "The rest of the house will still be a mess, but your desk will look great.",
-  },
-  {
-    name: "Focus Collection",
-    href: "#",
-    imageSrc:
-      "https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-03.jpg",
-    imageAlt:
-      "Person placing task list card into walnut card holder next to felt carrying case on leather desk pad.",
-    description:
-      "Be more productive than enterprise project managers with a single piece of paper.",
-  },
-];
 </script>