refactor: extract footer as a component

components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    FooterBar: typeof import('./src/components/FooterBar.vue')['default']
     IMdiTranslate: typeof import('~icons/mdi/translate')['default']
     LanguageSwitch: typeof import('./src/components/LanguageSwitch.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/App.vue

@@ -16,6 +16,10 @@
     <main>
         <RouterView />
     </main>
+
+    <footer>
+        <FooterBar />
+    </footer>
 </template>
 <script setup lang="ts">
 import { useLocalStorage, useTitle } from "@vueuse/core";

src/components/FooterBar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+let { t } = useI18n();
+</script>
+<template>
+    <var-divider>
+        <var-icon name="heart-outline" style="margin: 0 16px; color: pink" />
+    </var-divider>
+    <div class="footer flex items-center justify-center">
+        <span
+            >{{ new Date().getFullYear() }} MtF.im is made with
+            <var-icon name="heart" color="pink"
+        /></span>
+    </div>
+    <div class="footer flex items-center justify-center">
+        <span
+            ><a href="/user-agreement">{{
+                t("footer.user-agreement")
+            }}</a></span
+        >
+        <var-divider vertical />
+        <span
+            ><a href="/privacy-policy">{{
+                t("footer.privacy-policy")
+            }}</a></span
+        >
+        <var-divider vertical />
+        <span
+            ><a href="//mtf.im/about-us">{{ t("footer.about-us") }}</a></span
+        >
+    </div>
+</template>
+<style scoped>
+.footer {
+    color: #333;
+}
+
+.footer a {
+    font-size: 14px;
+    color: #888;
+    text-decoration: none;
+}
+
+.footer span {
+    font-size: 14px;
+    color: #888;
+    text-decoration: none;
+}
+</style>

src/components/LanguageSwitch.vue

@@ -11,7 +11,7 @@
         </var-menu-select>
     </div>
 </template>
-<script setup>
+<script setup lang="ts">
 import i18n from "../i18n/i18n.ts";
 let locale = i18n.global.locale;
 </script>

src/views/auth/LoginView.vue

@@ -132,8 +132,6 @@ async function login() {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100vh;
-    width: 100vw;
 }
 
 .board {

src/views/auth/SignUpView.vue

@@ -147,8 +147,6 @@ async function signup() {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100vh;
-    width: 100vw;
 }
 
 .board {

src/views/authorize/AuthorizeView.vue

@@ -206,32 +206,6 @@ var scope_detail = data.scope.split(" ").map(get_scope_detail);
             </var-paper>
         </div>
     </var-space>
-    <var-divider>
-        <var-icon name="heart-outline" style="margin: 0 16px; color: pink" />
-    </var-divider>
-    <div class="footer">
-        <span
-            >{{ new Date().getFullYear() }} MtF.im is made with
-            <var-icon name="heart" color="pink"
-        /></span>
-    </div>
-    <div class="footer">
-        <span
-            ><a href="/user-agreement">{{
-                t("footer.user-agreement")
-            }}</a></span
-        >
-        <var-divider vertical />
-        <span
-            ><a href="/privacy-policy">{{
-                t("footer.privacy-policy")
-            }}</a></span
-        >
-        <var-divider vertical />
-        <span
-            ><a href="//mtf.im/about-us">{{ t("footer.about-us") }}</a></span
-        >
-    </div>
 </template>
 
 <style scoped>
@@ -272,23 +246,4 @@ var scope_detail = data.scope.split(" ").map(get_scope_detail);
     background-color: var(--color-danger);
     color: white;
 }
-
-.footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #333;
-}
-
-.footer a {
-    font-size: 14px;
-    color: #888;
-    text-decoration: none;
-}
-
-.footer span {
-    font-size: 14px;
-    color: #888;
-    text-decoration: none;
-}
 </style>