115 lines
4.4 KiB
JavaScript
115 lines
4.4 KiB
JavaScript
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 { useTranslation } from "next-i18next";
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(0, 0);
|
|
};
|
|
|
|
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);
|
|
};
|
|
|
|
return (
|
|
<div className="wpo-campaign-area-s4 section-padding">
|
|
<div className="container">
|
|
<div className="wpo-campaign-wrap">
|
|
{/* Tab Navigation */}
|
|
<Nav tabs>
|
|
{categories.slice(0, 5).map((cat, idx) => (
|
|
<NavItem key={idx}>
|
|
<NavLink
|
|
className={classnames({ active: activeTab === cat })}
|
|
onClick={() => toggle(cat)}
|
|
>
|
|
{cat}
|
|
</NavLink>
|
|
</NavItem>
|
|
))}
|
|
</Nav>
|
|
|
|
{/* Tab Content */}
|
|
<TabContent activeTab={activeTab}>
|
|
{categories.map((cat, idx) => (
|
|
<TabPane tabId={cat} key={idx}>
|
|
<Row>
|
|
{/* Filter campaigns based on category */}
|
|
{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} // Service Image
|
|
alt={service.sTitle} // Service Title for Alt text
|
|
width={400}
|
|
height={250}
|
|
/>
|
|
</div>
|
|
<div className="wpo-campaign-content">
|
|
<div className="wpo-campaign-text-top">
|
|
<h2>
|
|
<Link
|
|
onClick={ClickHandler}
|
|
href={`/service-single/[slug]`}
|
|
as={`/service-single/${service.slug}`} // Dynamic slug
|
|
>
|
|
{service.sTitle} {/* Service Title */}
|
|
</Link>
|
|
</h2>
|
|
<p
|
|
dangerouslySetInnerHTML={{
|
|
__html:
|
|
service.description.length > 100
|
|
? service.description.substring(0, 100) + "..."
|
|
: service.description,
|
|
}}
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Row>
|
|
</TabPane>
|
|
))}
|
|
</TabContent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ServiceSectionS2;
|