try to translate the hero

Hetari · Sep 6, 2024 · d23e003 · d23e003
1 parent 206d875
commit d23e003
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 28 deletions.
diff --git a/src/components/sections/Hero.vue b/src/components/sections/Hero.vue
@@ -8,7 +8,15 @@
         <div class="w-full items-end overflow-clip">
           <div class="flex w-full items-start gap-10">
             <MyName />
-            <Star id="star" class="hide-on-mobile translate-x-full" />
+            <Star
+              id="star"
+              class="hide-on-mobile"
+              :class="
+                i18n.global.locale == 'en'
+                  ? 'translate-x-full'
+                  : '-translate-x-full'
+              "
+            />
           </div>
         </div>
 
@@ -44,7 +52,7 @@
             <p
               v-html="whoAmI"
               id="whoAmI"
-              class="who-am-i text-fluid-body text-base-large w-full max-w-[30ch] overflow-clip text-balance font-medium leading-snug sm:max-w-[37ch] lg:text-start"
+              class="who-am-i text-fluid-body text-base-large w-full max-w-[30ch] overflow-clip text-balance text-start font-medium leading-snug sm:max-w-[37ch]"
             ></p>
 
             <div class="relative origin-left overflow-hidden sm:scale-150">
@@ -81,9 +89,9 @@
                 Available for freelance work
               </p>
               <h1
-                class="3xl:heading-1 heading-1-alt block font-fancy font-bold leading-none -tracking-tight"
+                class="3xl:heading-1 heading-1-alt font-fancy block font-bold leading-none -tracking-tight"
               >
-                {{ AvailableForWorkDate }}
+                {{ getAvailableForWorkDate }}
               </h1>
             </div>
           </div>
@@ -95,46 +103,32 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref } from 'vue';
+  import { computed, onBeforeMount, ref } from 'vue';
   import { MyName, Star } from '../design';
   import { Button } from '@/components/common';
   import { profile } from '@/assets/images';
   import { heroText } from '@/data';
   import { textSplitterIntoChar } from '@/functions';
+  import { i18n } from '@/main';
 
   const whoAmI = ref(heroText);
-  const AvailableForWorkDate = ref('');
 
-  const getAvailableForWorkDate = () => {
+  const getAvailableForWorkDate = computed(() => {
     const date = new Date();
 
+    // Extract last two digits of the year
     const year = date.getFullYear().toString().slice(-2);
-    const monthNames = [
-      'JAN',
-      'FEB',
-      'MAR',
-      'APR',
-      'MAY',
-      'JUN',
-      'JUL',
-      'AUG',
-      'SEP',
-      'OCT',
-      'NOV',
-      'DEC',
-    ];
-    let index = date.getMonth();
 
-    if (date.getMonth() < 12) {
-      index += 1;
-    }
-    const month = monthNames[index];
+    // Get next month (current month + 1)
+    const nextMonthIndex = date.getMonth() + 1;
+
+    // Retrieve the month name from i18n
+    const month = i18n.global.t(`date.monthNames.${nextMonthIndex}`);
 
     return `${month} '${year}`;
-  };
+  });
 
   onBeforeMount(() => {
     whoAmI.value = textSplitterIntoChar(whoAmI.value);
-    AvailableForWorkDate.value = getAvailableForWorkDate();
   });
 </script>
diff --git a/src/languages/ar.ts b/src/languages/ar.ts
@@ -30,6 +30,22 @@ const ar = {
     hetari: 'الهتاري',
     comma: '،',
   },
+  date: {
+    monthNames: [
+      'يناير',
+      'فبراير',
+      'مارس',
+      'أبريل',
+      'مايو',
+      'يونيو',
+      'يوليو',
+      'أغسطس',
+      'سبتمبر',
+      'أكتوبر',
+      'نوفمبر',
+      'ديسمبر',
+    ],
+  },
   nav: {
     available: 'متوفر',
     forFreelancer: 'للعمل الحر',

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -30,6 +30,22 @@ const en = {
     hetari: 'Hetari',
     comma: ',',
   },
+  date: {
+    monthNames: [
+      'JAN',
+      'FEB',
+      'MAR',
+      'APR',
+      'MAY',
+      'JUN',
+      'JUL',
+      'AUG',
+      'SEP',
+      'OCT',
+      'NOV',
+      'DEC',
+    ],
+  },
   nav: {
     available: 'available',
     forFreelancer: 'for freelancers',