feat(ui): more ui improvements

pages/store/[id]/index.vue

@@ -49,19 +49,60 @@
               aria-hidden="true"
             />
           </NuxtLink>
-          <div class="inline-flex items-center gap-x-3">
-            <span class="text-zinc-100 font-semibold">Available on:</span>
-            <component
-              v-for="platform in platforms"
-              :is="icons[platform]"
-              class="text-blue-600 w-6 h-6"
-            />
-            <span
-              v-if="platforms.length == 0"
-              class="font-semibold text-blue-600"
-              >coming soon</span
-            >
-          </div>
+          <table class="min-w-full">
+            <tbody>
+              <tr>
+                <td
+                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  Released
+                </td>
+                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                  {{ moment(game.mReleased).format("Do MMMM, YYYY") }}
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  Platform(s)
+                </td>
+                <td
+                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
+                >
+                  <component
+                    v-for="platform in platforms"
+                    :is="icons[platform]"
+                    class="text-blue-600 w-6 h-6"
+                  />
+                  <span
+                    v-if="platforms.length == 0"
+                    class="font-semibold text-blue-600"
+                    >coming soon</span
+                  >
+                </td>
+              </tr>
+              <tr>
+                <td
+                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                >
+                  Rating
+                </td>
+                <td
+                  class="whitespace-nowrap flex flex-row items-center  gap-x-1 px-3 py-4 text-sm text-zinc-400"
+                >
+                  <StarIcon
+                    v-for="value in ratingArray"
+                    :class="[
+                      value ? 'text-yellow-600' : 'text-zinc-600',
+                      'w-4 h-4',
+                    ]"
+                  />
+                  <span class="text-zinc-600">({{ game.mReviewCount }} reviews)</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
 
         <div class="row-start-2 lg:row-start-1 lg:col-span-3">
@@ -118,8 +159,10 @@
 <script setup lang="ts">
 import { PlusIcon } from "@heroicons/vue/20/solid";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+import { StarIcon } from "@heroicons/vue/24/solid";
 import { Platform, type Game, type GameVersion } from "@prisma/client";
 import MarkdownIt from "markdown-it";
+import moment from "moment";
 import LinuxLogo from "~/components/icons/LinuxLogo.vue";
 import WindowsLogo from "~/components/WindowsLogo.vue";
 
@@ -168,6 +211,11 @@ const icons = {
   [Platform.Windows]: WindowsLogo,
 };
 
+const rating = Math.round(game.mReviewRating * 5);
+const ratingArray = Array(5)
+  .fill(null)
+  .map((_, i) => i + 1 <= rating);
+
 useHead({
   title: game.mName,
 });

pages/store/index.vue

@@ -13,9 +13,10 @@
   ```
 -->
 <template>
-  <div class="w-full">
+  <div class="w-full flex flex-col">
     <!-- Hero section -->
     <VueCarousel
+      v-if="recent.length > 0"
       :wrapAround="true"
       :items-to-show="1"
       :autoplay="15 * 1000"
@@ -32,7 +33,7 @@
             />
           </div>
           <div
-            class="relative w-full h-full bg-gray-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
+            class="relative w-full h-full bg-zinc-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
           >
             <div
               class="relative mx-auto flex max-w-xl flex-col items-center text-center"
@@ -62,19 +63,40 @@
         <CarouselPagination class="py-2" :items="recent" />
       </template>
     </VueCarousel>
+    <div
+      v-else
+      class="w-full h-full flex items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
+    >
+      <h2
+        class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
+      >
+        no game
+      </h2>
+    </div>
 
-    <!-- recently updated -->
+    <!-- new releases -->
     <div class="px-4 sm:px-12 py-4">
-      <h1 class="text-zinc-100 text-2xl font-bold font-display">Recently updated</h1>
+      <h1 class="text-zinc-100 text-2xl font-bold font-display">
+        Recently released
+      </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"
-        />
+        <GameCarousel :items="released" :min="12" />
+      </div>
+    </div>
+
+    <!-- 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 :items="updated" :min="12" />
       </div>
     </div>
   </div>
@@ -82,8 +104,11 @@
 
 <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 });
+const recent = await $fetch("/api/v1/store/recent", { headers });
+const updated = await $fetch("/api/v1/store/updated", { headers });
+const released = await $fetch("/api/v1/store/released", {
+  headers,
+});
 
 useHead({
   title: "Store",