From 815ab6b3464ce6f6236972e7ca3765ed18e0de8b Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Mon, 18 Aug 2025 21:12:26 +0530 Subject: [PATCH 1/2] home page services updated for language --- .../ServiceSectionS2/ServiceSectionS2.js | 44 ++++++++++++------- next-i18next.config.js | 2 +- pages/index.js | 2 +- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/components/ServiceSectionS2/ServiceSectionS2.js b/components/ServiceSectionS2/ServiceSectionS2.js index 946fc73..f1c9f3f 100644 --- a/components/ServiceSectionS2/ServiceSectionS2.js +++ b/components/ServiceSectionS2/ServiceSectionS2.js @@ -3,17 +3,22 @@ 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 Campaign from "../../api/campaign"; +import { useTranslation } from "next-i18next"; 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 } = useTranslation("services"); // Assuming your translations are in services.json + + // 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 const [activeTab, setActiveTab] = useState(categories[0]); const toggle = (tab) => { @@ -43,15 +48,18 @@ const ServiceSectionS2 = () => { {categories.map((cat, idx) => ( - {Campaign.filter((srv) => srv.category === cat).slice(0,3).map( - (service, srvIdx) => ( + {/* Filter campaigns based on category */} + {campaigns + .filter((srv) => srv.category === cat) + .slice(0, 3) // Limit to 3 services per category + .map((service, srvIdx) => (
{service.sTitle} @@ -62,19 +70,25 @@ const ServiceSectionS2 = () => { - {service.sTitle} + {service.sTitle} {/* Service Title */} -

{service.description}

+

100 + ? service.description.substring(0, 100) + '...' + : service.description, + }} + >

- ) - )} + ))} ))} diff --git a/next-i18next.config.js b/next-i18next.config.js index 8de3690..e35fdb0 100644 --- a/next-i18next.config.js +++ b/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', 'contact'], defaultNS: 'common', // localePath: './public/locales', }; diff --git a/pages/index.js b/pages/index.js index 6b8da0b..cdb01ca 100644 --- a/pages/index.js +++ b/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 }, }; } From 79963422a76918904b2e5f72488e694b41e18775 Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Mon, 18 Aug 2025 21:27:52 +0530 Subject: [PATCH 2/2] home page about section updated --- .../ServiceSectionS2/ServiceSectionS2.js | 22 ++++++++++++++----- components/header2/Header2.js | 2 +- next-i18next.config.js | 2 +- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/components/ServiceSectionS2/ServiceSectionS2.js b/components/ServiceSectionS2/ServiceSectionS2.js index f1c9f3f..15279cb 100644 --- a/components/ServiceSectionS2/ServiceSectionS2.js +++ b/components/ServiceSectionS2/ServiceSectionS2.js @@ -1,4 +1,4 @@ -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"; @@ -10,7 +10,7 @@ const ClickHandler = () => { }; const ServiceSectionS2 = () => { - const { t } = useTranslation("services"); // Assuming your translations are in services.json + const { t, i18n } = useTranslation("services"); // Get campaigns array from the translation JSON const campaigns = t("campaigns", { returnObjects: true }); @@ -18,9 +18,21 @@ const ServiceSectionS2 = () => { // Extract unique categories from the campaigns dynamically const categories = [...new Set(campaigns.map((service) => service.category))]; - // Default active tab is the first 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); }; @@ -31,7 +43,7 @@ const ServiceSectionS2 = () => {
{/* Tab Navigation */}