fix: fix footer language not changing when language is changed

components/footer/Footer.tsx

@@ -1,88 +1,81 @@
 import Link from 'next/link';
 import React from 'react';
-
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
 
 import AsyncAPILogoLight from '../logos/AsyncAPILogoLight';
 import Heading from '../typography/Heading';
 import type { InitiativeLink, SocialMediaLink } from './FooterList';
+interface FooterProps {
+  currentLanguage: string;
+}
 import { initiativeLinks, socialMediaLinks } from './FooterList';
 
-/**
- * @description The Footer component is the footer for the application.
- */
-export default function Footer() {
+export default function Footer({ currentLanguage }: FooterProps) {
+  const { t } = useTranslation('footer');
+
   return (
-    <footer className='margin: 0 auto mt-12 bg-dark'>
-      <div className='mx-auto max-w-screen-xl divide-y divide-cool-gray overflow-hidden px-3 py-4 sm:p-6 md:py-12 lg:px-8 xl:py-16'>
-        <nav className='flex flex-wrap justify-between py-4 sm:py-10'>
-          <div className='mr-14 w-full md:w-auto'>
-            <div className=''>
-              <Link href='/' aria-label='AsyncAPI'>
-                <span className='cursor-pointer' data-testid='Footer-logo-link'>
-                  <AsyncAPILogoLight className='mt-3 h-10 w-auto' />
-                </span>
-              </Link>
-            </div>
-            <div className=''>
-              <Heading className='mb-14 mt-12 text-white' typeStyle={HeadingTypeStyle.smSemibold}>
-                Building the future of <br /> Event-Driven Architectures.
-              </Heading>
-            </div>
+    <footer className='mt-12 bg-dark'>
+      <div className='mx-auto max-w-screen-xl px-3 py-4 sm:px-6 md:py-12 lg:px-8 xl:py-16'>
+        <nav className='flex flex-wrap justify-between gap-8 py-4 sm:py-10'>
+          {/* Logo & Main Heading */}
+          <div className='w-full md:w-auto'>
+            <Link href='/' aria-label='AsyncAPI'>
+              <span className='cursor-pointer' data-testid='Footer-logo-link'>
+                <AsyncAPILogoLight className='mt-3 h-10 w-auto' />
+              </span>
+            </Link>
+            <Heading className='mb-10 mt-8 text-white' typeStyle={HeadingTypeStyle.smSemibold}>
+              {t('buildingFuture')}
+            </Heading>
           </div>
 
-          <div className='flex flex-col sm:flex-row'>
-            <div className='flex'>
-              <div className='mb-5 px-0 lg:ml-5 lg:px-10'>
-                <div className='py-2'>
-                  <div className='text-white'>
-                    <Heading typeStyle={HeadingTypeStyle.smSemibold}>The Initiative</Heading>
-                  </div>
-                </div>
-                <ul className='justify-center'>
-                  {initiativeLinks.map((link: InitiativeLink, index: number) => (
-                    <li className='py-2' key={index} data-testid='Footer-initiative-links'>
-                      <Link href={link.url}>
-                        <span className='text-base leading-6 text-cool-gray transition duration-300 ease-in-out hover:text-white'>
-                          {link.label}
-                        </span>
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              <div className='mb-5 px-14 sm:ml-10 sm:px-8 md:ml-5'>
-                <div className='py-2'>
-                  <div className='text-white'>
-                    <Heading typeStyle={HeadingTypeStyle.smSemibold}>News</Heading>
-                  </div>
-                </div>
-                <ul className='justify-center'>
-                  <li className='py-2'>
-                    <div className='text-base leading-6 text-cool-gray transition duration-300 ease-in-out hover:text-white'>
-                      <a href='mailto:press@asyncapi.io'>Email Us</a>
-                    </div>
+          {/* Links Section */}
+          <div className='flex flex-wrap gap-6 md:gap-12'>
+            {/* Initiatives */}
+            <div className='min-w-[150px]'>
+              <Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'>
+                {t('initiative')}
+              </Heading>
+              <ul>
+                {initiativeLinks.map((link: InitiativeLink, index: number) => (
+                  <li key={index} className='py-1'>
+                    <Link href={link.url}>
+                      <span className='text-base text-cool-gray transition duration-300 ease-in-out hover:text-white'>
+                        {t(link.label)}
+                      </span>
+                    </Link>
                   </li>
-                </ul>
-              </div>
+                ))}
+              </ul>
             </div>
 
-            <div className='mb-5 px-0 sm:ml-5 sm:px-10'>
-              <div className='hidden py-2 sm:block'>
-                <div className='mr-12 text-white'>
-                  <Heading typeStyle={HeadingTypeStyle.smSemibold}>Social</Heading>
-                </div>
-              </div>
-              <ul className='flex justify-start sm:flex-col' aria-label='AsyncAPI social media links'>
+            {/* News */}
+            <div className='min-w-[150px]'>
+              <Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'>
+                {t('news')}
+              </Heading>
+              <ul>
+                <li className='py-1'>
+                  <a href='mailto:press@asyncapi.io' className='text-cool-gray transition hover:text-white'>
+                    {t('emailUs')}
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Social Media */}
+            <div className='min-w-[150px]'>
+              <Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'>
+                {t('social')}
+              </Heading>
+              <ul className='flex flex-col'>
                 {socialMediaLinks.map((link: SocialMediaLink, index: number) => (
-                  <li className='mr-3 py-2 sm:mr-0' key={index} data-testid='Footer-social-media-links'>
-                    <a href={link.url} target='_blank' rel='noopener noreferrer'>
-                      <div className='flex items-center text-cool-gray transition duration-300 ease-in-out hover:text-white'>
-                        <span className='sr-only'>{`Follow AsyncAPI on ${link.label}`}</span>
-                        {link.icon}
-                        <span className='absolute hidden pl-8 pr-5 sm:block'>{link.label}</span>
-                      </div>
+                  <li key={index} className='py-1'>
+                    <a href={link.url} target='_blank' rel='noopener noreferrer' className='flex items-center gap-2 text-cool-gray transition hover:text-white'>
+                      {link.icon}
+                      <span className='hidden sm:inline'>{link.label}</span>
                     </a>
                   </li>
                 ))}
@@ -91,34 +84,23 @@ export default function Footer() {
           </div>
         </nav>
 
-        <div className='justify-between py-8 sm:flex sm:py-12 xl:mt-20' data-testid='Footer-content'>
-          <div className='w-full sm:w-2/3'>
-            <p className='mb-3 text-left text-base leading-6 text-cool-gray'>
-              Made with <span className='font-mono text-secondary-500'>:love:</span> by the AsyncAPI Initiative.
-            </p>
-            <p className='w-full text-left text-sm leading-6 text-cool-gray sm:w-2/3' data-testid='Footer-copyright'>
-              Copyright &copy; AsyncAPI Project a Series of LF Projects, LLC. For web site terms of use, trademark
-              policy and general project policies please see{' '}
-              <a
-                href='https://lfprojects.org'
-                className='text-secondary-500 underline transition duration-300 ease-in-out hover:text-white'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                https://lfprojects.org
-              </a>
-            </p>
+        {/* Bottom Section */}
+        <div className='flex flex-wrap items-center justify-between py-8 sm:py-12'>
+          <div className='w-full sm:w-auto text-cool-gray text-sm'>
+            <p className='mb-3'>{t('madeWithLove')}</p>
+            <p>{t('copyright')}</p>
           </div>
-          <div className='mt-8 block sm:mt-0'>
-            <p className='block text-sm leading-6'>
-              <a href='https://netlify.com' target='_blank' rel='noopener noreferrer'>
-                <img
-                  src='https://www.netlify.com/img/global/badges/netlify-color-bg.svg'
-                  className='inline'
-                  alt='Deploys by Netlify'
-                />
-              </a>
-            </p>
+          <div className='mt-6 sm:mt-0'>
+            <a 
+            href='https://netlify.com' 
+            target='_blank'
+             rel='noopener noreferrer'>
+            <img
+             src='https://www.netlify.com/img/global/badges/netlify-color-bg.svg'
+              className='h-6'
+               alt='Deploys by Netlify'
+                />          
+                  </a>
           </div>
         </div>
       </div>

components/footer/FooterList.ts

@@ -6,6 +6,7 @@ import IconSlack from '../icons/Slack';
 import IconTwitch from '../icons/Twitch';
 import IconTwitter from '../icons/Twitter';
 import IconYoutubeGray from '../icons/YouTubeGray';
+import { useTranslation } from 'next-i18next';
 
 export interface SocialMediaLink {
   url: string;
@@ -73,3 +74,12 @@ export const initiativeLinks: InitiativeLink[] = [
     url: '/about#faqs'
   }
 ];
+
+export function TranslatedInitiativeLinks() {
+  const { t } = useTranslation('footer');
+
+  return initiativeLinks.map((link) => ({
+    ...link,
+    label: t(link.label)
+  }));
+}

next-i18next.config.js

@@ -2,7 +2,7 @@ module.exports = {
   i18n: {
     locales: ['en', 'de'],
     defaultLocale: 'en',
-    namespaces: ['landing-page', 'common', 'tools'],
+    namespaces: ['landing-page', 'common', 'tools', 'footer'],
     defaultNamespace: 'landing-page',
     react: { useSuspense: false },// this line
   },

pages/_app.tsx

@@ -18,6 +18,8 @@ import AppContext from '@/context/AppContext';
  * @description The MyApp component is the root component for the application.
  */
 function MyApp({ Component, pageProps, router }: AppProps) {
+  const { locale } = router;
+
   return (
     <AppContext.Provider value={{ path: router.asPath }}>
       {/* <MDXProvider components={mdxComponents}> */}
@@ -35,7 +37,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
             <ScrollButton />
           </Layout>
           <div className='mt-auto'>
-            <Footer />
+            <Footer currentLanguage={locale} />
           </div>
         </div>
       </AlgoliaSearch>

public/locales/de/footer.json

@@ -0,0 +1,15 @@
+{
+  "buildingFuture": "Die Zukunft der ereignisgesteuerten Architekturen gestalten",
+  "initiative": "Initiative",
+  "news": "Nachrichten",
+  "emailUs": "Schreiben Sie uns eine E-Mail",
+  "social": "Sozial",
+  "followAsyncAPI": "Folgen Sie AsyncAPI auf",
+  "madeWithLove": "Mit Liebe gemacht von der AsyncAPI-Community",
+  "copyright": "© 2023 AsyncAPI Initiative. Alle Rechte vorbehalten.",
+  "About" : "Über",
+  "Blog" : "Blog",
+  "Brand" : "Marke",
+  "Finance" : "Finanzen",
+  "FAQs" : "FAQs"
+}

public/locales/en/footer.json

@@ -0,0 +1,10 @@
+{
+  "buildingFuture": "Building the future of event-driven architectures",
+  "initiative": "Initiative",
+  "news": "News",
+  "emailUs": "Email us",
+  "social": "Social",
+  "followAsyncAPI": "Follow AsyncAPI on",
+  "madeWithLove": "Made with love by the AsyncAPI community",
+  "copyright": "© 2023 AsyncAPI Initiative. All rights reserved."
+}