From 72e298541670d1af3baccb646e267ecdfffdf949 Mon Sep 17 00:00:00 2001
From: Khoa Nguyen Do <khoanguyen.do@outlook.com>
Date: Mon, 13 Nov 2023 14:42:42 +0700
Subject: [PATCH] feat: implement recent books section

---
 .../page/index/PageIndexRecentBooks.vue       | 52 +++++++++++++++++++
 .../page/index/PageIndexRecentReleases.vue    |  2 +-
 locales/vi-VN.json                            |  3 +-
 pages/index.vue                               |  2 +
 4 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 components/page/index/PageIndexRecentBooks.vue

diff --git a/components/page/index/PageIndexRecentBooks.vue b/components/page/index/PageIndexRecentBooks.vue
new file mode 100644
index 00000000..0fddcc90
--- /dev/null
+++ b/components/page/index/PageIndexRecentBooks.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Collections } from "@/types/pb";
+import type { BookDetailsCommon } from "@/types/common";
+
+const { $pb } = useNuxtApp();
+
+const { data: books } = await useLazyAsyncData(() =>
+  $pb.collection(Collections.BookDetails).getList<BookDetailsCommon>(1, 6, {
+    expand: "publication,release,release.title",
+    sort: "-updated",
+  }),
+);
+</script>
+
+<template>
+  <div v-if="books">
+    <UContainer class="mb-6">
+      <NuxtLink to="/browse">
+        <AppH3
+          class="flex items-center gap-3 underline decoration-tanablue-400 decoration-[.2rem] underline-offset-[.2rem]"
+        >
+          <img
+            src="/icon.svg"
+            class="h-6"
+            height="24"
+            width="24"
+            alt="Tana.moe logo"
+          />
+          {{ $t("general.justUpdatedBooks") }}
+        </AppH3>
+      </NuxtLink>
+    </UContainer>
+    <div
+      class="mx-auto flex snap-x snap-mandatory gap-6 overflow-x-scroll sm:container sm:grid sm:grid-cols-3 sm:overflow-x-hidden sm:px-6 lg:grid-cols-6"
+    >
+      <div
+        v-for="(book, i) in books.items"
+        :key="book.id"
+        :class="[
+          'w-1/3 flex-shrink-0 snap-start scroll-ml-6 sm:w-full',
+          i === 0 && 'ml-6 sm:ml-0',
+          i === books.items.length - 1 && 'mr-6 sm:mr-0',
+        ]"
+      >
+        <AppBook
+          :book="book"
+          sizes="(max-width: 640px) 40vw, (max-width: 768px) 30vw, 20vw"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/page/index/PageIndexRecentReleases.vue b/components/page/index/PageIndexRecentReleases.vue
index 6c18e369..4cdf7143 100644
--- a/components/page/index/PageIndexRecentReleases.vue
+++ b/components/page/index/PageIndexRecentReleases.vue
@@ -6,7 +6,7 @@ import {
   type TitlesResponse,
   type PublishersResponse,
 } from "@/types/pb";
-import type { MetadataCommon } from "~/types/common";
+import type { MetadataCommon } from "@/types/common";
 
 type ResponseType = ReleaseDetailsResponse<
   MetadataCommon,
diff --git a/locales/vi-VN.json b/locales/vi-VN.json
index 7ad6b13a..e3748be5 100644
--- a/locales/vi-VN.json
+++ b/locales/vi-VN.json
@@ -42,7 +42,8 @@
     "coverImages": "Ảnh bìa",
     "edition": "Phiên bản",
     "recentPosts": "Bài viết gần đây",
-    "justUpdatedReleases": "Truyện vừa cập nhật",
+    "justUpdatedBooks": "Truyện vừa cập nhật",
+    "justUpdatedReleases": "Bộ truyện vừa cập nhật",
     "dateRelease": "Phát hành ngày {date}",
     "viewTitleDetails": "Xem chi tiết",
     "bookPrice": "Giá dự kiến",
diff --git a/pages/index.vue b/pages/index.vue
index 3f8fee1c..5283be69 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -62,6 +62,8 @@ definePageMeta({
       <AppRegisterBanner />
     </UContainer>
 
+    <PageIndexRecentBooks />
+
     <PageIndexRecentReleases />
   </div>
 </template>