From 1f3c4805f0d7e98ea5fb44b59d7fbf0ecf9f551e Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 21:06:28 +0800
Subject: [PATCH] Refactor i18n initialization and make UI adjustments

Converted the `initializeI18nClient` function to an asynchronous function for a more straightforward implementation. Simultaneously, made some tweaks to the UI components, such as altering dimensions in `site-footer.tsx` and `site-page-header.tsx`, and refactoring the `FooterSectionHeading` component for easier maintenance and improved readability.
---
 .../(marketing)/_components/site-footer.tsx   | 16 ++--
 .../_components/site-page-header.tsx          |  2 +-
 packages/i18n/src/i18n.client.ts              | 90 +++++++++----------
 3 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
index 5d775f23c..8904716bb 100644
--- a/apps/web/app/(marketing)/_components/site-footer.tsx
+++ b/apps/web/app/(marketing)/_components/site-footer.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 
+import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
 import { AppLogo } from '~/components/app-logo';
@@ -10,7 +11,7 @@ const YEAR = new Date().getFullYear();
 export function SiteFooter() {
   return (
     <footer className={'border-t py-8 xl:py-12 2xl:py-14'}>
-      <div className={'container mx-auto'}>
+      <div className={'px-8'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
             className={
@@ -20,10 +21,10 @@ export function SiteFooter() {
           >
             <div className={'flex flex-col space-y-4'}>
               <div>
-                <AppLogo className={'w-[85px] md:w-[115px]'} />
+                <AppLogo className={'w-[85px] md:w-[95px]'} />
               </div>
 
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-4'}>
                 <div>
                   <p className={'text-sm text-muted-foreground'}>
                     Add a short tagline about your product
@@ -42,8 +43,7 @@ export function SiteFooter() {
           <div
             className={
               'flex flex-col space-y-8 lg:space-x-6 lg:space-y-0' +
-              ' xl:space-x-16 2xl:space-x-20' +
-              ' w-full lg:flex-row lg:justify-end'
+              ' w-full lg:flex-row lg:justify-end xl:space-x-16'
             }
           >
             <div>
@@ -116,11 +116,7 @@ export function SiteFooter() {
 }
 
 function FooterSectionHeading(props: React.PropsWithChildren) {
-  return (
-    <p>
-      <span className={'font-semibold'}>{props.children}</span>
-    </p>
-  );
+  return <Heading level={6}>{props.children}</Heading>;
 }
 
 function FooterSectionList(props: React.PropsWithChildren) {
diff --git a/apps/web/app/(marketing)/_components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx
index 4c9d6d41c..c92fb1dbb 100644
--- a/apps/web/app/(marketing)/_components/site-page-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-page-header.tsx
@@ -6,7 +6,7 @@ export function SitePageHeader(props: {
   className?: string;
 }) {
   return (
-    <div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
+    <div className={cn('border-b py-8 xl:py-10 2xl:py-12', props.className)}>
       <div className={'container flex flex-col space-y-2 lg:space-y-4'}>
         <h1 className={'font-base font-heading text-3xl xl:text-5xl'}>
           {props.title}
diff --git a/packages/i18n/src/i18n.client.ts b/packages/i18n/src/i18n.client.ts
index e436407e6..04690ddaf 100644
--- a/packages/i18n/src/i18n.client.ts
+++ b/packages/i18n/src/i18n.client.ts
@@ -10,7 +10,7 @@ let clientInstance: i18n | null = null;
  * @param settings - the i18n settings
  * @param resolver - a function that resolves the i18n resources
  */
-export function initializeI18nClient(
+export async function initializeI18nClient(
   settings: InitOptions,
   resolver: (lang: string, namespace: string) => Promise<object>,
 ): Promise<i18n> {
@@ -18,52 +18,50 @@ export function initializeI18nClient(
     return Promise.resolve(clientInstance);
   }
 
-  return new Promise<i18n>((resolve, reject) => {
-    void i18next
-      .use(initReactI18next)
-      .use(
-        resourcesToBackend(async (language, namespace, callback) => {
-          const data = await resolver(language, namespace);
+  await i18next
+    .use(initReactI18next)
+    .use(
+      resourcesToBackend(async (language, namespace, callback) => {
+        const data = await resolver(language, namespace);
 
-          return callback(null, data);
-        }),
-      )
-      .use(LanguageDetector)
-      .init(
-        {
-          ...settings,
-          detection: {
-            order: ['htmlTag', 'cookie', 'navigator'],
-            caches: ['cookie'],
-            lookupCookie: 'lang',
-          },
-          interpolation: {
-            escapeValue: false,
-          },
+        return callback(null, data);
+      }),
+    )
+    .use(LanguageDetector)
+    .init(
+      {
+        ...settings,
+        detection: {
+          order: ['htmlTag', 'cookie', 'navigator'],
+          caches: ['cookie'],
+          lookupCookie: 'lang',
         },
-        (err) => {
-          if (err) {
-            console.error('Error initializing i18n client', err);
-            return reject(err);
-          }
-
-          console.log('i18n client initialized');
-          console.log(
-            `initialized with ${i18next.languages.join(', ')} languages`,
-            clientInstance,
-          );
-
-          console.log(
-            'resource',
-            i18next.getResource('en', 'billing', 'billingInterval.month'),
-          );
-
-          console.log(i18next.t('billing:billingInterval.month'));
-
-          clientInstance = i18next;
-
-          resolve(clientInstance);
+        interpolation: {
+          escapeValue: false,
         },
-      );
-  });
+      },
+      (err) => {
+        if (err) {
+          console.error('Error initializing i18n client', err);
+        }
+      },
+    );
+
+  console.log('i18n client initialized');
+
+  console.log(
+    `initialized with ${i18next.languages.join(', ')} languages`,
+    clientInstance,
+  );
+
+  console.log(
+    'resource',
+    i18next.getResource('en', 'billing', 'billingInterval.month'),
+  );
+
+  console.log(i18next.t('billing:billingInterval.month'));
+
+  clientInstance = i18next;
+
+  return clientInstance;
 }