From 89458cd18cf9a1dbf8301385eaf293208c1f1248 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 26 May 2022 14:21:31 +0800
Subject: [PATCH] feat: add comments list page

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/core/icons.ts                             |   4 +
 .../contents/attachments/AttachmentList.vue   |  14 +
 src/views/contents/comments/CommentList.vue   | 213 +++++++++-
 src/views/contents/posts/PostList.vue         |  26 --
 src/views/contents/sheets/SheetList.vue       | 394 +++++++++---------
 5 files changed, 421 insertions(+), 230 deletions(-)

diff --git a/src/core/icons.ts b/src/core/icons.ts
index 617b92b0d..52b52416f 100644
--- a/src/core/icons.ts
+++ b/src/core/icons.ts
@@ -35,6 +35,7 @@ import IconClose from "~icons/ri/close-line";
 // @ts-ignore
 import IconErrorWarning from "~icons/ri/error-warning-line";
 // @ts-ignore
+// @ts-ignore
 import IconCheckboxCircle from "~icons/ri/checkbox-circle-line";
 // @ts-ignore
 import IconInformation from "~icons/ri/information-line";
@@ -50,6 +51,8 @@ import IconSave from "~icons/ri/save-line";
 import IconList from "~icons/ri/list-unordered";
 // @ts-ignore
 import IconGrid from "~icons/ri/grid-line";
+// @ts-ignore
+import IconCheckboxFill from "~icons/ri/checkbox-circle-fill";
 
 export {
   IconDashboard,
@@ -78,4 +81,5 @@ export {
   IconSave,
   IconList,
   IconGrid,
+  IconCheckboxFill,
 };
diff --git a/src/views/contents/attachments/AttachmentList.vue b/src/views/contents/attachments/AttachmentList.vue
index d6732d953..4bd5ff17f 100644
--- a/src/views/contents/attachments/AttachmentList.vue
+++ b/src/views/contents/attachments/AttachmentList.vue
@@ -10,6 +10,7 @@ import {
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
+  IconCheckboxFill,
   IconGrid,
   IconList,
   IconPalette,
@@ -190,6 +191,14 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
               1.2 MB
             </dd>
           </div>
+          <div
+            class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          >
+            <dt class="text-sm font-medium text-gray-900">上传者</dt>
+            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              Ryan Wang
+            </dd>
+          </div>
           <div
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
@@ -369,6 +378,11 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                 >
                   {{ attachment.name }}
                 </p>
+
+                <IconCheckboxFill
+                  v-if="checkAll"
+                  class="absolute top-0.5 right-0.5"
+                />
               </div>
             </VCard>
           </div>
diff --git a/src/views/contents/comments/CommentList.vue b/src/views/contents/comments/CommentList.vue
index f3563446f..dfca5dd14 100644
--- a/src/views/contents/comments/CommentList.vue
+++ b/src/views/contents/comments/CommentList.vue
@@ -1 +1,212 @@
-<template>Comments</template>
+<script lang="ts" setup>
+import { VPageHeader } from "@/components/base/header";
+import { VCard } from "@/components/base/card";
+import { VInput } from "@/components/base/input";
+import { VButton } from "@/components/base/button";
+import { VSpace } from "@/components/base/space";
+import { IconArrowDown, IconMessage, IconSettings } from "@/core/icons";
+import { ref } from "vue";
+
+const checkAll = ref(false);
+</script>
+<template>
+  <VPageHeader title="评论">
+    <template #icon>
+      <IconMessage class="self-center mr-2" />
+    </template>
+    <template #actions>
+      <VSpace>
+        <VButton type="default">回收站</VButton>
+      </VSpace>
+    </template>
+  </VPageHeader>
+
+  <div class="m-0 md:m-4">
+    <VCard :body-class="['!p-0']">
+      <template #header>
+        <div class="px-4 py-3 block w-full bg-gray-50">
+          <div
+            class="flex flex-col sm:flex-row items-start sm:items-center relative"
+          >
+            <div class="hidden sm:flex items-center mr-4">
+              <input
+                v-model="checkAll"
+                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                type="checkbox"
+              />
+            </div>
+            <div class="w-full sm:w-auto flex flex-1">
+              <VInput
+                v-if="!checkAll"
+                class="w-full sm:w-72"
+                placeholder="输入关键词搜索"
+              />
+              <VSpace v-else>
+                <VButton type="default">设置</VButton>
+                <VButton type="danger">删除</VButton>
+              </VSpace>
+            </div>
+            <div class="mt-4 sm:mt-0 flex">
+              <VSpace spacing="lg">
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">状态</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">评论者</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">排序</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
+              </VSpace>
+            </div>
+          </div>
+        </div>
+      </template>
+      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
+        <li v-for="index in 10" :key="index">
+          <div
+            :class="{
+              'bg-gray-100': checkAll,
+            }"
+            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+          >
+            <div
+              v-show="checkAll"
+              class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+            ></div>
+            <div class="flex flex-row items-center relative">
+              <div class="hidden mr-4 sm:flex items-center">
+                <input
+                  v-model="checkAll"
+                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  type="checkbox"
+                />
+              </div>
+              <div class="flex-1">
+                <div class="flex flex-col sm:flex-row">
+                  <span
+                    class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                  >
+                    Ryan Wang
+                  </span>
+                </div>
+                <div class="flex mt-1">
+                  <VSpace>
+                    <p class="text-xs text-gray-500">评论测试</p>
+                  </VSpace>
+                </div>
+              </div>
+              <div class="flex">
+                <div
+                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                >
+                  <img
+                    class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                    src="https://ryanc.cc/avatar"
+                  />
+                  <time class="text-sm text-gray-500" datetime="2020-01-07">
+                    2020-01-07
+                  </time>
+                  <span class="cursor-pointer">
+                    <IconSettings />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <template #footer>
+        <div class="bg-white flex items-center justify-end">
+          <div class="flex-1 flex items-center justify-end">
+            <div>
+              <nav
+                aria-label="Pagination"
+                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+              >
+                <a
+                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  href="#"
+                >
+                  <span class="sr-only">Previous</span>
+                  <svg
+                    aria-hidden="true"
+                    class="h-5 w-5"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </a>
+                <a
+                  aria-current="page"
+                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  href="#"
+                >
+                  1
+                </a>
+                <a
+                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  href="#"
+                >
+                  2
+                </a>
+                <span
+                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                >
+                  ...
+                </span>
+                <a
+                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                  href="#"
+                >
+                  4
+                </a>
+                <a
+                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  href="#"
+                >
+                  <span class="sr-only">Next</span>
+                  <svg
+                    aria-hidden="true"
+                    class="h-5 w-5"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </template>
+    </VCard>
+  </div>
+</template>
diff --git a/src/views/contents/posts/PostList.vue b/src/views/contents/posts/PostList.vue
index e32f98f66..20efab10d 100644
--- a/src/views/contents/posts/PostList.vue
+++ b/src/views/contents/posts/PostList.vue
@@ -528,29 +528,3 @@ const handleRouteToEditor = (post: any) => {
     </VCard>
   </div>
 </template>
-
-<style lang="scss">
-.table-container {
-  @apply table;
-  @apply w-full;
-  border: 1px solid #fff;
-  background: #fff;
-
-  border-radius: 4px;
-
-  .table-item {
-    @apply table-row;
-    @apply cursor-pointer;
-    @apply transition-all;
-
-    &:hover {
-      @apply bg-gray-100;
-    }
-  }
-
-  .table-cell {
-    display: table-cell;
-    padding: 10px;
-  }
-}
-</style>
diff --git a/src/views/contents/sheets/SheetList.vue b/src/views/contents/sheets/SheetList.vue
index dd5bd46f6..c1be3580f 100644
--- a/src/views/contents/sheets/SheetList.vue
+++ b/src/views/contents/sheets/SheetList.vue
@@ -3,11 +3,13 @@ import { VButton } from "@/components/base/button";
 import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
 import { VTag } from "@/components/base/tag";
+import { VTabs } from "@/components/base/tabs";
 import { VInput } from "@/components/base/input";
 import { VPageHeader } from "@/components/base/header";
 import { IconPages, IconSettings } from "@/core/icons";
 import { posts } from "../posts/posts-mock";
 import { ref } from "vue";
+import TabItem from "@/components/base/tabs/TabItem.vue";
 
 const postsRef = ref(
   posts.map((item) => {
@@ -19,6 +21,7 @@ const postsRef = ref(
 );
 
 const checkAll = ref(false);
+const activeId = ref("advanced");
 
 const handleCheckAll = () => {
   postsRef.value.forEach((item) => {
@@ -38,219 +41,204 @@ handleCheckAll();
   </VPageHeader>
 
   <div class="m-0 md:m-4">
-    <VCard :body-class="['!p-0']">
-      <template #header>
-        <div
-          class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
-        >
-          <div class="flex-1">
-            <VInput placeholder="输入关键词搜索" />
-          </div>
-          <div class="flex flex-row gap-3">
-            <div>分类</div>
-            <div>标签</div>
-            <div>作者</div>
-            <div>排序</div>
-          </div>
-        </div>
-      </template>
-      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
-        <li v-for="(post, index) in postsRef" :key="index">
-          <div
-            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
-          >
-            <div class="flex flex-row items-center relative">
+    <VTabs v-model:active-id="activeId" type="outline">
+      <TabItem id="advanced" label="功能页面"></TabItem>
+      <TabItem id="custom" label="自定义页面">
+        <VCard :body-class="['!p-0']">
+          <template #header>
+            <div
+              class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
+            >
               <div class="flex-1">
-                <div class="flex flex-col sm:flex-row">
-                  <span
-                    class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
-                  >
-                    {{ post.title }}
-                  </span>
-                  <VSpace class="mt-1 sm:mt-0">
-                    <VTag v-for="(tag, tagIndex) in post.tags" :key="tagIndex">
-                      {{ tag.name }}
-                    </VTag>
-                  </VSpace>
-                </div>
-                <div class="flex mt-1">
-                  <VSpace>
-                    <span class="text-xs text-gray-500"
-                      >阅读 {{ post.visits }}</span
-                    >
-                    <span class="text-xs text-gray-500"
-                      >评论 {{ post.commentCount }}</span
-                    >
-                  </VSpace>
-                </div>
+                <VInput placeholder="输入关键词搜索" />
               </div>
-              <div class="flex">
-                <div
-                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
-                >
-                  <img
-                    class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
-                    src="https://ryanc.cc/avatar"
-                  />
-                  <time class="text-sm text-gray-500" datetime="2020-01-07">
-                    2020-01-07
-                  </time>
-                  <span>
-                    <IconSettings />
-                  </span>
-                </div>
+              <div class="flex flex-row gap-3">
+                <div>分类</div>
+                <div>标签</div>
+                <div>作者</div>
+                <div>排序</div>
               </div>
             </div>
-          </div>
-        </li>
-      </ul>
-
-      <template #footer>
-        <div class="bg-white flex items-center justify-between">
-          <div class="flex-1 flex justify-between sm:hidden">
-            <a
-              class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-              href="#"
-            >
-              Previous
-            </a>
-            <a
-              class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-              href="#"
-            >
-              Next
-            </a>
-          </div>
-          <div
-            class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
+          </template>
+          <ul
+            class="divide-y divide-gray-100 box-border w-full h-full"
+            role="list"
           >
-            <div>
-              <p class="text-sm text-gray-700">
-                Showing
-                <span class="font-medium">1</span>
-                to
-                <span class="font-medium">10</span>
-                of
-                <span class="font-medium">97</span>
-                results
-              </p>
-            </div>
-            <div>
-              <nav
-                aria-label="Pagination"
-                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+            <li v-for="(post, index) in postsRef" :key="index">
+              <div
+                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
               >
+                <div class="flex flex-row items-center relative">
+                  <div class="flex-1">
+                    <div class="flex flex-col sm:flex-row">
+                      <span
+                        class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                      >
+                        {{ post.title }}
+                      </span>
+                      <VSpace class="mt-1 sm:mt-0">
+                        <VTag
+                          v-for="(tag, tagIndex) in post.tags"
+                          :key="tagIndex"
+                        >
+                          {{ tag.name }}
+                        </VTag>
+                      </VSpace>
+                    </div>
+                    <div class="flex mt-1">
+                      <VSpace>
+                        <span class="text-xs text-gray-500"
+                          >阅读 {{ post.visits }}</span
+                        >
+                        <span class="text-xs text-gray-500"
+                          >评论 {{ post.commentCount }}</span
+                        >
+                      </VSpace>
+                    </div>
+                  </div>
+                  <div class="flex">
+                    <div
+                      class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                    >
+                      <img
+                        class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                        src="https://ryanc.cc/avatar"
+                      />
+                      <time class="text-sm text-gray-500" datetime="2020-01-07">
+                        2020-01-07
+                      </time>
+                      <span>
+                        <IconSettings />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+
+          <template #footer>
+            <div class="bg-white flex items-center justify-between">
+              <div class="flex-1 flex justify-between sm:hidden">
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
                   href="#"
                 >
-                  <span class="sr-only">Previous</span>
-                  <svg
-                    aria-hidden="true"
-                    class="h-5 w-5"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
+                  Previous
+                </a>
+                <a
+                  class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  href="#"
+                >
+                  Next
+                </a>
+              </div>
+              <div
+                class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
+              >
+                <div>
+                  <p class="text-sm text-gray-700">
+                    Showing
+                    <span class="font-medium">1</span>
+                    to
+                    <span class="font-medium">10</span>
+                    of
+                    <span class="font-medium">97</span>
+                    results
+                  </p>
+                </div>
+                <div>
+                  <nav
+                    aria-label="Pagination"
+                    class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                   >
-                    <path
-                      clip-rule="evenodd"
-                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </a>
-                <a
-                  aria-current="page"
-                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
-                  href="#"
-                >
-                  1
-                </a>
-                <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
-                  href="#"
-                >
-                  2
-                </a>
-                <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
-                  href="#"
-                >
-                  3
-                </a>
-                <span
-                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
-                >
-                  ...
-                </span>
-                <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
-                  href="#"
-                >
-                  8
-                </a>
-                <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
-                  href="#"
-                >
-                  9
-                </a>
-                <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
-                  href="#"
-                >
-                  10
-                </a>
-                <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-                  href="#"
-                >
-                  <span class="sr-only">Next</span>
-                  <svg
-                    aria-hidden="true"
-                    class="h-5 w-5"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </a>
-              </nav>
+                    <a
+                      class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      href="#"
+                    >
+                      <span class="sr-only">Previous</span>
+                      <svg
+                        aria-hidden="true"
+                        class="h-5 w-5"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </a>
+                    <a
+                      aria-current="page"
+                      class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      1
+                    </a>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      2
+                    </a>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      3
+                    </a>
+                    <span
+                      class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                    >
+                      ...
+                    </span>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      8
+                    </a>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      9
+                    </a>
+                    <a
+                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      href="#"
+                    >
+                      10
+                    </a>
+                    <a
+                      class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      href="#"
+                    >
+                      <span class="sr-only">Next</span>
+                      <svg
+                        aria-hidden="true"
+                        class="h-5 w-5"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          clip-rule="evenodd"
+                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </a>
+                  </nav>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </template>
-    </VCard>
+          </template>
+        </VCard>
+      </TabItem>
+    </VTabs>
   </div>
 </template>
-
-<style lang="scss">
-.table-container {
-  @apply table;
-  @apply w-full;
-  border: 1px solid #fff;
-  background: #fff;
-
-  border-radius: 4px;
-
-  .table-item {
-    @apply table-row;
-    @apply cursor-pointer;
-    @apply transition-all;
-
-    &:hover {
-      @apply bg-gray-100;
-    }
-  }
-
-  .table-cell {
-    display: table-cell;
-    padding: 10px;
-  }
-}
-</style>