📝 Update user agreement in zh

app/pages/terms/[slug].vue

@@ -14,7 +14,7 @@ useHead({
 <template>
   <article
     v-if="page"
-    class="prose lg:prose-lg dark:prose-invert prose-neutral mx-auto my-16"
+    class="prose lg:prose-lg dark:prose-invert prose-neutral mx-auto my-16 px-8"
   >
     <content-renderer :value="page" />
     <div v-if="page.updatedDate" class="text-sm mt-6">

app/pages/terms/index.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="container max-w-lg mx-auto my-16">
-    <h1 class="text-4xl font-bold mb-4">Terms and Conditions</h1>
+  <div class="container max-w-xl mx-auto my-16 px-8">
+    <div class="flex justify-between items-end mb-4 gap-4">
+      <h1 class="text-4xl font-bold pl-1">Terms and Conditions</h1>
+      <n-select
+        v-model:value="chosenLanguage"
+        :options="languageOptions"
+        class="max-w-36"
+      />
+    </div>
     <nuxt-link v-for="term in terms" :key="term.path" :to="term.path">
-      <n-card :title="term.title" hoverable class="mb-4 mx-[-8px]">
+      <n-card :title="term.title" hoverable class="mb-4">
         <p>{{ term.description }}</p>
 
         <template #footer>
@@ -17,9 +24,26 @@
 </template>
 
 <script setup>
-import { NCard } from "naive-ui";
-const { data: terms } = await useAsyncData("terms", () =>
-  queryCollection("terms").order("updatedDate", "DESC").all(),
+import { NCard, NSelect } from "naive-ui";
+
+const languages = ["zh", "en"];
+const languageNames = ["简体中文", "English"];
+
+const languageOptions = languages.map((lang) => ({
+  label: languageNames[languages.indexOf(lang)],
+  value: lang,
+}));
+
+const chosenLanguage = ref(languages[0]);
+
+const { data: terms } = await useAsyncData(
+  "terms",
+  () =>
+    queryCollection("terms")
+      .where("lang", "=", chosenLanguage.value)
+      .order("updatedDate", "DESC")
+      .all(),
+  { watch: [chosenLanguage] },
 );
 </script>