Translate static texts

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>