I18n implementation

template/app/package.json

@@ -13,6 +13,8 @@
     "apexcharts": "3.41.0",
     "clsx": "^2.1.0",
     "headlessui": "^0.0.0",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "node-fetch": "3.3.0",
     "openai": "^4.55.3",
     "prettier": "3.1.1",
@@ -22,6 +24,7 @@
     "react-router-dom": "^6.26.2",
     "react-apexcharts": "1.4.1",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^15.2.0",
     "react-icons": "4.11.0",
     "stripe": "11.15.0",
     "tailwind-merge": "^2.2.1",

template/app/src/client/App.tsx

@@ -1,8 +1,9 @@
 import './Main.css';
+import '../i18n';
 import NavBar from './components/NavBar/NavBar';
 import CookieConsentBanner from './components/cookie-consent/Banner';
-import { appNavigationItems } from './components/NavBar/contentSections';
-import { landingPageNavigationItems } from '../landing-page/contentSections';
+import { useAppNavigationItems } from './components/NavBar/contentSections';
+import { useLandingPageNavigationItems } from '../landing-page/contentSections';
 import { useMemo, useEffect } from 'react';
 import { routes } from 'wasp/client/router';
 import { Outlet, useLocation } from 'react-router-dom';
@@ -18,7 +19,11 @@ export default function App() {
   const location = useLocation();
   const { data: user } = useAuth();
   const isLandingPage = useIsLandingPage();
-  const navigationItems = isLandingPage ? landingPageNavigationItems : appNavigationItems;
+
+  // Use the new hook instead of direct array
+  const appNavItems = useAppNavigationItems();
+  const landingPageNavItems = useLandingPageNavigationItems();
+  const navigationItems = isLandingPage ? landingPageNavItems : appNavItems;
 
   const shouldDisplayAppNavBar = useMemo(() => {
     return location.pathname !== routes.LoginRoute.build() && location.pathname !== routes.SignupRoute.build();

template/app/src/client/components/LanguageSelector.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { BiGlobe } from 'react-icons/bi';
+import { cn } from '../cn';
+
+interface LanguageSelectorProps {
+  isLandingPage?: boolean;
+  className?: string;
+}
+
+export default function LanguageSelector({ isLandingPage, className }: LanguageSelectorProps) {
+  const { i18n } = useTranslation();
+
+  // Initialize language from localStorage or default to 'en'
+  React.useEffect(() => {
+    const savedLanguage = localStorage.getItem('language') || 'en';
+    i18n.changeLanguage(savedLanguage);
+  }, [i18n]);
+
+  const changeLanguage = (lng: string) => {
+    localStorage.setItem('language', lng);
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className={cn(
+      "flex items-center gap-1 sm:gap-2 p-1 sm:p-2 rounded-md", 
+      "bg-transparent hover:bg-gray-100/10 dark:hover:bg-gray-800/50 transition-colors duration-200",
+      className
+    )}>
+      <BiGlobe className={cn(
+        "h-4 w-4 sm:h-5 sm:w-5 transition-transform duration-200", 
+        {
+          'text-black dark:text-white': isLandingPage,
+          'text-black dark:text-gray-200': !isLandingPage,
+          'hover:scale-110': true
+        }
+      )} />
+      <select
+        onChange={(e) => changeLanguage(e.target.value)}
+        value={i18n.language}
+        className={cn(
+          "bg-transparent text-xs sm:text-sm font-semibold leading-6",
+          "border-none cursor-pointer outline-none transition-colors duration-200",
+          "appearance-none -mr-1",
+          "focus:ring-0 focus:ring-offset-0",
+          isLandingPage 
+            ? 'text-black dark:text-white hover:text-yellow-500'
+            : 'text-black hover:text-yellow-500 dark:text-gray-200 dark:hover:text-yellow-500'
+        )}
+      >
+        <option 
+          value="en" 
+          className="text-black dark:text-gray-200 bg-white dark:bg-gray-800 text-xs sm:text-sm"
+        >
+          EN
+        </option>
+        <option 
+          value="es" 
+          className="text-black dark:text-gray-200 bg-white dark:bg-gray-800 text-xs sm:text-sm"
+        >
+          ES
+        </option>
+      </select>
+    </div>
+  );
+} 

template/app/src/client/components/NavBar/NavBar.tsx

@@ -12,6 +12,7 @@ import { UserMenuItems } from '../../../user/UserMenuItems';
 import DarkModeSwitcher from '../DarkModeSwitcher';
 import { useIsLandingPage } from '../../hooks/useIsLandingPage';
 import { cn } from '../../cn';
+import LanguageSelector from '../LanguageSelector';
 
 export interface NavigationItem {
   name: string;
@@ -58,6 +59,7 @@ export default function AppNavBar({ navigationItems }: { navigationItems: Naviga
         <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
           <ul className='flex justify-center items-center gap-2 sm:gap-4'>
             <DarkModeSwitcher />
+            <LanguageSelector isLandingPage={isLandingPage} />
           </ul>
           {isUserLoading ? null : !user ? (
             <WaspRouterLink to={routes.LoginRoute.to} className='text-sm font-semibold leading-6 ml-3'>
@@ -105,6 +107,9 @@ export default function AppNavBar({ navigationItems }: { navigationItems: Naviga
               </div>
               <div className='py-6'>
                 <DarkModeSwitcher />
+                <div className='mt-2'>
+                  <LanguageSelector isLandingPage={isLandingPage} />
+                </div>
               </div>
             </div>
           </div>

template/app/src/client/components/NavBar/contentSections.ts

@@ -1,11 +1,35 @@
 import type { NavigationItem } from '../NavBar/NavBar';
 import { routes } from 'wasp/client/router';
 import { BlogUrl, DocsUrl } from '../../../shared/common';
+import { useTranslation } from 'react-i18next';
 
-export const appNavigationItems: NavigationItem[] = [
-  { name: 'AI Scheduler (Demo App)', to: routes.DemoAppRoute.to },
-  { name: 'File Upload (AWS S3)', to: routes.FileUploadRoute.to },
-  { name: 'Pricing', to: routes.PricingPageRoute.to },
-  { name: 'Documentation', to: DocsUrl },
-  { name: 'Blog', to: BlogUrl },
-];
+export const useAppNavigationItems = (): NavigationItem[] => {
+  const { t, i18n } = useTranslation();
+
+  // Debug log
+  console.log('Current language:', i18n.language);
+  console.log('Translation test:', t('navigation.aiScheduler'));
+
+  return [
+    { 
+      name: t('navigation.aiScheduler'), 
+      to: routes.DemoAppRoute.to 
+    },
+    { 
+      name: t('navigation.fileUpload'), 
+      to: routes.FileUploadRoute.to 
+    },
+    { 
+      name: t('navigation.pricing'), 
+      to: routes.PricingPageRoute.to 
+    },
+    { 
+      name: t('navigation.documentation'), 
+      to: DocsUrl 
+    },
+    { 
+      name: t('navigation.blog'), 
+      to: BlogUrl 
+    },
+  ];
+};