feat: introducing i18n support to admin dashboard (#3051)

packages/hoppscotch-sh-admin/src/components/teams/Add.vue

@@ -2,13 +2,13 @@
   <HoppSmartModal
     v-if="show"
     dialog
-    title="Create team"
+    :title="t('teams.create_team')"
     @close="$emit('hide-modal')"
   >
     <template #body>
       <div class="flex flex-col space-y-4 relative">
         <div class="flex flex-col relaive">
-          <label for="teamName" class="py-2"> Team owner email </label>
+          <label for="teamName" class="py-2"> {{ t('teams.email') }} </label>
           <HoppSmartAutoComplete
             styles="w-full p-2 bg-transparent border border-divider rounded-md "
             class="flex-1 !flex"
@@ -19,7 +19,7 @@
           />
         </div>
         <div class="flex flex-col">
-          <label for="teamName" class="py-2">Team name</label>
+          <label for="teamName" class="py-2">{{ t('teams.name') }} </label>
           <input
             id="teamName"
             v-model="teamName"
@@ -35,11 +35,16 @@
     <template #footer>
       <span class="flex space-x-2">
         <HoppButtonPrimary
-          label="Create team"
+          :label="t('teams.create_team')"
           :loading="loadingState"
           @click="createTeam"
         />
-        <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
+        <HoppButtonSecondary
+          :label="t('teams.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
       </span>
     </template>
   </HoppSmartModal>
@@ -48,6 +53,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useToast } from '~/composables/toast';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 const toast = useToast();
 
@@ -75,11 +83,11 @@ const getOwnerEmail = (email: string) => (ownerEmail.value = email);
 
 const createTeam = () => {
   if (teamName.value.trim() === '') {
-    toast.error('Please enter a valid team name');
+    toast.error(`${t('teams.valid_name')}`);
     return;
   }
   if (ownerEmail.value.trim() === '') {
-    toast.error('Please enter a valid owner email');
+    toast.error(`${t('teams.valid_owner_email')}`);
     return;
   }
   emit('create-team', teamName.value, ownerEmail.value);