89 lines
3.1 KiB
JavaScript
89 lines
3.1 KiB
JavaScript
import React, { useState } 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 Campaign from "../../api/campaign";
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
};
|
|
|
|
// Extract unique categories from the JSON dynamically
|
|
const categories = [...new Set(Campaign.map((service) => service.category))];
|
|
|
|
const ServiceSectionS2 = () => {
|
|
const [activeTab, setActiveTab] = useState(categories[0]);
|
|
|
|
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.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>
|
|
{Campaign.filter((srv) => srv.category === cat).slice(0,3).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}
|
|
alt={service.sTitle}
|
|
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}`}
|
|
>
|
|
{service.sTitle}
|
|
</Link>
|
|
</h2>
|
|
<p>{service.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</Row>
|
|
</TabPane>
|
|
))}
|
|
</TabContent>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ServiceSectionS2;
|