header language change option updated for 2 languages

components/HeaderTopbar/HeaderTopbar.js

@@ -7,15 +7,28 @@ import Image from 'next/image'
 import { useTranslation } from 'next-i18next'
 import { changeLanguage } from '../../utils/commonFunction.utils'
 import { useRouter } from 'next/router'
+import Slider from 'react-slick'
 
 const HeaderTopbar = () => {
-  const { t } = useTranslation('common')
-
+  const { t, i18n } = useTranslation('common')
   const router = useRouter()
 
-  const handleLanguageChange = () => {
-    changeLanguage(router, 'es'); // always switch to Spanish
-  };
+  const handleLanguageChange = (locale) => {
+    changeLanguage(router, locale)
+  }
+
+  // Slider Settings
+  const settings = {
+    dots: false,
+    arrows: false,
+    infinite: true,
+    autoplay: true,
+    autoplaySpeed: 2000,
+    speed: 600,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    fade: true,
+  }
 
   return (
     <>
@@ -26,24 +39,88 @@ const HeaderTopbar = () => {
         }}
       >
         <div className="container-fluid">
-          <div className='d-flex justify-content-center align-items-center gap-5 flex-wrap'>
-            <div className="text-center" style={{ color: 'white' }}>
-              Haz clic en el botón para cambiar a español.
+          <Slider {...settings}>
+            {/* 🔹 Show only Spanish switch if current lang is English */}
+            {i18n.language === 'en' && (
+              <div>
+                <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                  <div className="text-center text-white">
+                    Haz clic en el botón para cambiar el idioma a <b>Español</b>.
                   </div>
-            <button onClick={handleLanguageChange} className='white-button'>Haz clic aquí</button>
+                  <button
+                    onClick={() => handleLanguageChange('es')}
+                    className="white-button"
+                  >
+                    Cambiar a Español
+                  </button>
                 </div>
               </div>
+            )}
+            {
+              i18n.language === 'es' && (
+                <div>
+                  <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                    <div className="text-center text-white">
+                      Haz clic en el botón para cambiar el idioma a <b>Inglés</b>.
+                    </div>
+                    <button
+                      onClick={() => handleLanguageChange('en')}
+                      className="white-button"
+                    >
+                      Cambiar a Inglés
+                    </button>
+                  </div>
+                </div>
+              )
+            }
+
+            {/* 🔹 Show only English switch if current lang is Spanish */}
+            {i18n.language === 'en' && (
+              <div>
+                <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                  <div className="text-center text-white">
+                    Click the button to switch the language to <b>Spanish</b>.
+                  </div>
+                  <button
+                    onClick={() => handleLanguageChange('es')}
+                    className="white-button"
+                  >
+                    Switch to Spanish
+                  </button>
+                </div>
+              </div>
+            )}
+            {i18n.language === 'es' && (
+              <div>
+                <div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
+                  <div className="text-center text-white">
+                    Click the button to switch the language to <b>English</b>.
+                  </div>
+                  <button
+                    onClick={() => handleLanguageChange('en')}
+                    className="white-button"
+                  >
+                    Switch to English
+                  </button>
+                </div>
+              </div>
+            )}
+          </Slider>
+        </div>
       </div>
 
+      {/* 🔹 Main Topbar */}
       <div className="topbar d-lg-block d-none">
         <div className="container">
           <div className="row align-items-center">
+            {/* Logo */}
             <div className="col-lg-3 col-12 d-lg-block d-none">
               <Link className="navbar-brand" href="/">
                 <Image src={Logo} alt="logo" />
               </Link>
             </div>
 
+            {/* Contact Info */}
             <div className="col-lg-6 col-12">
               <div className="contact-info-wrap">
                 <div className="contact-info">
@@ -67,6 +144,7 @@ const HeaderTopbar = () => {
               </div>
             </div>
 
+            {/* Contact Button */}
             <div className="col-lg-3 col-12 d-flex justify-content-end align-items-center">
               <div className="contact-info ms-3">
                 <Link className="theme-btn" href="/contact">

next-i18next.config.js

@@ -1,7 +1,7 @@
 
 module.exports = {
     i18n: {
-        defaultLocale: 'es',
+        defaultLocale: 'en',
         locales: ['en', 'es'],
         localeDetection: false,
     },