Translate static texts

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>