chore: add i18n

polylan_submitter/src/ErrorPage.vue

@@ -1,16 +1,29 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useTitle } from "@vueuse/core";
+
 interface Props {
   code?: string;
-  title?: string;
-  message?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   code: "500",
-  title: "Something went wrong",
-  message: "An unexpected error occurred.",
 });
 
+const { t } = useI18n();
+
+const errorKey = computed(() => {
+  if (props.code === "404") return "errorPage.notFound";
+  if (props.code === "500") return "errorPage.serverError";
+  return "errorPage.generic";
+});
+
+const title = computed(() => t(`${errorKey.value}.title`));
+const message = computed(() => t(`${errorKey.value}.message`));
+
+useTitle(title);
+
 const goBack = () => window.history.back();
 </script>
 
@@ -24,11 +37,11 @@ const goBack = () => window.history.back();
       <div class="mt-8 flex items-center justify-center gap-4">
         <a href="/" class="btn btn-primary">
           <i class="mdi mdi-home mr-2"></i>
-          Go home
+          {{ t("errorPage.goHome") }}
         </a>
         <button @click="goBack" class="btn btn-ghost">
           <i class="mdi mdi-arrow-left mr-2"></i>
-          Go back
+          {{ t("errorPage.goBack") }}
         </button>
       </div>
     </div>