ourapproach language updated

components/ServiceSectionS2/ServiceSectionS2.js

@@ -1,21 +1,38 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { TabContent, TabPane, Nav, NavItem, NavLink, Row } from "reactstrap";
 import classnames from "classnames";
 import Link from "next/link";
 import Image from "next/image";
-import { TabServices } from "../../utils/constant.utils"; // JSON array
+import { useTranslation } from "next-i18next";
-import Campaign from "../../api/campaign";
 
 const ClickHandler = () => {
-  window.scrollTo(10, 0);
+  window.scrollTo(0, 0);
 };
 
-// Extract unique categories from the JSON dynamically
-const categories = [...new Set(Campaign.map((service) => service.category))];
-
 const ServiceSectionS2 = () => {
+  const { t, i18n } = useTranslation("services");
+
+  // Get campaigns array from the translation JSON
+  const campaigns = t("campaigns", { returnObjects: true });
+
+  // Extract unique categories from the campaigns dynamically
+  const categories = [...new Set(campaigns.map((service) => service.category))];
+
+  // Default active tab is the first category, but we will set it dynamically based on the language
   const [activeTab, setActiveTab] = useState(categories[0]);
 
+  // Function to change the active tab based on the selected language
+  const changeActiveTabOnLanguageChange = () => {
+    // Set the active tab to the first category whenever the language changes
+    setActiveTab(categories[0]);
+  };
+
+  // Track language changes using the `useEffect` hook
+  useEffect(() => {
+    // Whenever the language changes, reset the active tab
+    changeActiveTabOnLanguageChange();
+  }, [i18n.language]); // `i18n.language` triggers the effect when the language changes
+
   const toggle = (tab) => {
     if (activeTab !== tab) setActiveTab(tab);
   };
@@ -26,7 +43,7 @@ const ServiceSectionS2 = () => {
         <div className="wpo-campaign-wrap">
           {/* Tab Navigation */}
           <Nav tabs>
-            {categories.map((cat, idx) => (
+            {categories.slice(0, 5).map((cat, idx) => (
               <NavItem key={idx}>
                 <NavLink
                   className={classnames({ active: activeTab === cat })}
@@ -43,15 +60,18 @@ const ServiceSectionS2 = () => {
             {categories.map((cat, idx) => (
               <TabPane tabId={cat} key={idx}>
                 <Row>
-                  {Campaign.filter((srv) => srv.category === cat).slice(0,3).map(
+                  {/* Filter campaigns based on category */}
-                    (service, srvIdx) => (
+                  {campaigns
+                    .filter((srv) => srv.category === cat)
+                    .slice(0, 3) // Limit to 3 services per category
+                    .map((service, srvIdx) => (
                       <div className="col-lg-4 col-md-6 col-12" key={srvIdx}>
                         <div className="wpo-campaign-single">
                           <div className="wpo-campaign-item">
                             <div className="wpo-campaign-img">
                               <Image
-                                src={service.sImgS}
+                                src={service.sImgS} // Service Image
-                                alt={service.sTitle}
+                                alt={service.sTitle} // Service Title for Alt text
                                 width={400}
                                 height={250}
                               />
@@ -62,19 +82,25 @@ const ServiceSectionS2 = () => {
                                   <Link
                                     onClick={ClickHandler}
                                     href={`/service-single/[slug]`}
-                                    as={`/service-single/${service.slug}`}
+                                    as={`/service-single/${service.slug}`} // Dynamic slug
                                   >
-                                    {service.sTitle}
+                                    {service.sTitle} {/* Service Title */}
                                   </Link>
                                 </h2>
-                                <p>{service.description}</p>
+                                <p
+                                  dangerouslySetInnerHTML={{
+                                    __html:
+                                      service.description.length > 100
+                                        ? service.description.substring(0, 100) + "..."
+                                        : service.description,
+                                  }}
+                                ></p>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
-                    )
+                    ))}
-                  )}
                 </Row>
               </TabPane>
             ))}

components/header2/Header2.js

@@ -83,7 +83,7 @@ const Header2 = (props) => {
                                 <div className="header-right d-flex align-items-center justify-content-end">
                                     <div className="language me-4">
                                         <select onChange={handleLanguageChange} value={router.locale}>
-                                            <option value="es">Español</option>
+                                            <option value="es">Spanish</option>
                                             <option value="en">English</option>
                                         </select>
                                     </div>

next-i18next.config.js

@@ -5,7 +5,7 @@ module.exports = {
         locales: ['en', 'es'],
         localeDetection: false,
     },
-    ns: ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'ourMission', 'racialJustice', 'services', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor'],
+    ns: ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'ourMission', 'racialJustice', 'services', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'OurApproach', 'contact'],
     defaultNS: 'common',
     //   localePath: './public/locales',
 };

pages/index.js

@@ -40,7 +40,7 @@ export default HomePage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'services'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }