Translate static texts

app/components/ClickableImage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { t } = useI18n();
 const props = withDefaults(
   defineProps<{
     title?: string;
@@ -42,7 +43,7 @@ const isOpen = ref(false);
       </template>
     </VaImage>
     <template #footer>
-      <VaButton @click="isOpen = false">Close</VaButton>
+      <VaButton @click="isOpen = false">{{ t('vuestic.close') }}</VaButton>
     </template>
   </VaModal>
 </template>

app/components/TeamAddModal.vue

@@ -48,27 +48,26 @@ async function submit() {
   }
   pending.value = false;
 }
-// TODO: translate
 </script>
 
 <template>
-  <VaButton color="success" icon="group_add" @click="isOpen = true"
-    >Create a new team</VaButton
-  >
+  <VaButton color="success" icon="group_add" @click="isOpen = true">{{
+    t('comp.team_add.create_a_new_team')
+  }}</VaButton>
   <VaModal v-model="isOpen" close-button hide-default-actions>
-    <h3 class="text-3xl">Create a new team</h3>
+    <h3 class="mt-16 text-3xl">{{ t('comp.team_add.create_a_new_team') }}</h3>
     <div class="mt-4 flex flex-col gap-4">
       <VaInput
         v-model="data.name"
-        label="Name"
+        :label="t('comp.team_add.team_name')"
         placeholder="My cool team"
         min-length="3"
         max-length="256"
         counter
         :rules="[
-          validation.required('Name'),
-          validation.max('Name', 256),
-          validation.min('Name', 3)
+          validation.required(t('comp.team_add.team_name')),
+          validation.max(t('comp.team_add.team_name'), 256),
+          validation.min(t('comp.team_add.team_name'), 3)
         ]"
         required
       />
@@ -76,24 +75,26 @@ async function submit() {
         v-model="data.description"
         max-rows="4"
         min-rows="2"
-        label="Description"
+        :label="t('comp.team_add.description')"
         placeholder="The best team!"
         max-length="256"
         counter
-        :rules="[validation.maxOptional('Description', 256)]"
+        :rules="[validation.maxOptional(t('comp.team_add.description'), 256)]"
       />
-      <p>An invite code will be generated automatically.</p>
+      <p>{{ t('comp.team_add.invite_code_automatically') }}</p>
       <VaAlert v-if="error" color="danger">{{ t(error) }}</VaAlert>
     </div>
     <template #footer>
       <VaButtonGroup :loading="pending" :disabled="pending">
-        <VaButton color="secondary" @click="isOpen = false">Cancel</VaButton>
+        <VaButton color="secondary" @click="isOpen = false">{{
+          t('page.common.cancel')
+        }}</VaButton>
         <VaButton
           color="success"
           :disabled="data.name.length < 3 || pending"
           :loading="pending"
           @click="submit"
-          >Create</VaButton
+          >{{ t('comp.team_add.create') }}</VaButton
         >
       </VaButtonGroup>
     </template>

app/components/TeamJoinModal.vue

@@ -73,9 +73,11 @@ async function submit() {
 </script>
 
 <template>
-  <VaButton color="info" icon="search" @click="openModal">Join a team</VaButton>
+  <VaButton color="info" icon="search" @click="openModal">{{
+    t('comp.team_join.join_a_team')
+  }}</VaButton>
   <VaModal v-model="isOpen" close-button hide-default-actions>
-    <h3 class="text-3xl">Join a team</h3>
+    <h3 class="mt-16 text-3xl">{{ t('comp.team_join.join_a_team') }}</h3>
     <div class="mt-4 flex flex-col gap-4">
       <!-- @vue-ignore more specific than vuestic-->
       <VaSelect
@@ -85,11 +87,15 @@ async function submit() {
         track-by="id"
         searchable
         highlight-matched-text
-        placeholder="Select a team"
-        label="Select a team"
+        :placeholder="t('comp.team_join.select_a_team')"
+        :label="t('comp.team_join.select_a_team')"
         :text-by="
           (team: (typeof teams)[number]) =>
-            `'${team.name}' of '${team.owner.name}', ${team._count.members} members`
+            t('comp.team_join.team_preview', {
+              team: team.name,
+              owner: team.owner.name,
+              members: team._count.members
+            })
         "
       >
         <template #prependInner>
@@ -97,9 +103,13 @@ async function submit() {
         </template>
       </VaSelect>
       <p v-if="teams && teams.length <= 0">
-        No team has been created yet, be the first!
+        {{ t('comp.team_join.no_team_yet') }}
       </p>
-      <VaInput v-model="data.password" label="Password" placeholder="abc123">
+      <VaInput
+        v-model="data.password"
+        :label="t('auth.password')"
+        placeholder="abc123"
+      >
         <template #prependInner>
           <VaIcon name="password" />
         </template>
@@ -112,7 +122,9 @@ async function submit() {
         :loading="submitPending || pending"
         :disabled="submitPending"
       >
-        <VaButton color="secondary" @click="isOpen = false">Cancel</VaButton>
+        <VaButton color="secondary" @click="isOpen = false">{{
+          t('page.common.cancel')
+        }}</VaButton>
         <VaButton
           color="success"
           :disabled="
@@ -120,7 +132,7 @@ async function submit() {
           "
           :loading="submitPending || pending"
           @click="submit"
-          >Join</VaButton
+          >{{ t('page.common.join') }}</VaButton
         >
       </VaButtonGroup>
     </template>