feat: 👽 AT-22: Add i18n translations for the 'coming soon', 'page loa…

…ding' & 'page not found' pages.
Kene-Okoye · Mar 12, 2024 · 34db52f · 34db52f
1 parent fffdde6
commit 34db52f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/src/pages/comingSoon/ComingSoon.module.css b/src/pages/comingSoon/ComingSoon.module.css
@@ -11,4 +11,6 @@
   color: var(--carrot-orange-color);
   text-decoration: underline;
   margin-block-start: var(--spacing-sm) !important;
+  width: -moz-fit-content;
+  width: fit-content;
 }
diff --git a/src/pages/comingSoon/ComingSoon.tsx b/src/pages/comingSoon/ComingSoon.tsx
@@ -14,22 +14,22 @@ import instagramLogo from '@/assets/svg/instagram_logo_orange.svg';
 import linkedInLogo from '@/assets/svg/linkedin_logo_orange.svg';
 
 function ComingSoon() {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const currentLanguage: LanguageType = i18n.resolvedLanguage as LanguageType;
 
   return (
     <>
       <div className={comingSoonStyles['coming-soon--hero-section-wrapper']}>
         <HeroSection
-          h1Text="Coming soon"
-          pText="We‘re currently working on this page. Stay tuned for some exciting updates"
+          h1Text={`${t('coming_soon')}`}
+          pText={`${t('coming_soon_elaboration_text')}`}
           backGroundImage={heroImageComingSoon}
         >
           <Link
             className={comingSoonStyles['coming-soon--link']}
             to={`/${paths[currentLanguage].HOME}`}
           >
-            Return to the home page
+            {t('return_to_homepage')}
           </Link>
 
           <div className={comingSoonStyles['coming-soon--icon-wrapper']}>

diff --git a/src/pages/pageLoading/PageLoading.tsx b/src/pages/pageLoading/PageLoading.tsx
@@ -1,10 +1,14 @@
+import { useTranslation } from 'react-i18next';
+
 import pageLoadingStyles from '@/pages/pageLoading/PageLoading.module.css';
 
 const PageLoading = () => {
+  const { t } = useTranslation();
+
   return (
     <div className={pageLoadingStyles['page-loading']}>
       <div className={pageLoadingStyles['page-loading--container']}>
-        <p>Page is loading</p>
+        <p>{t('page_is_loading')}</p>
         <div className={pageLoadingStyles['page-loading--loading-line']}></div>
       </div>
     </div>

diff --git a/src/pages/pageNotFound/PageNotFound.tsx b/src/pages/pageNotFound/PageNotFound.tsx
@@ -7,14 +7,14 @@ import paths from '@/routes/paths';
 import pageNotFoundStyles from '@/pages/pageNotFound/PageNotFound.module.css';
 
 const PageNotFound = () => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const currentLanguage: LanguageType = i18n.resolvedLanguage as LanguageType;
 
   return (
     <div className={pageNotFoundStyles['page-not-found']}>
       <div className={pageNotFoundStyles['page-not-found--content-wrapper']}>
-        <p>404: The page you requested could not be found.</p>
-        <Link to={`/${paths[currentLanguage].HOME}`}>Return to the Home Page</Link>
+        <p>{t('page_not_found')}</p>
+        <Link to={`/${paths[currentLanguage].HOME}`}>{t('return_to_homepage')}</Link>
       </div>
     </div>
   );