92 lines
3.9 KiB
JavaScript
92 lines
3.9 KiB
JavaScript
'use client'
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import { communityData } from "@/utility/constant.utils";
|
|
|
|
export default function Section1() {
|
|
const yearGroups = Object.keys(communityData);
|
|
const [selectedYear, setSelectedYear] = useState(yearGroups[0]);
|
|
|
|
return (
|
|
<>
|
|
<div className="blog-details-section sp4">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-3">
|
|
<div className="space30 d-lg-none d-block" />
|
|
<div className="blog-auhtor-details">
|
|
<div className="blog-categories">
|
|
<h3>Community Directory</h3>
|
|
<div className="space12" />
|
|
<ul>
|
|
{yearGroups.map((year) => (
|
|
<li key={year}>
|
|
<button
|
|
className={`category-btn${selectedYear === year ? " active" : ""}`}
|
|
onClick={() => setSelectedYear(year)}
|
|
>
|
|
{year}
|
|
<span><i className="fa-solid fa-angle-right" /></span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-9">
|
|
<div className="team-sperkers-section-area sp1">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-11 m-auto">
|
|
<div className="schedule">
|
|
{communityData[selectedYear] ? (
|
|
Object.entries(communityData[selectedYear]).map(([role, members]) => (
|
|
<div key={role} className="mb-5">
|
|
<h3 style={{ marginBottom: "30px", fontWeight: "bold" }}>{role}</h3>
|
|
<div className="row gx-4">
|
|
{members.map((member, idx) => (
|
|
<div className="col-lg-4 col-md-6 mb-5" key={idx}>
|
|
<div className="our-team-boxarea">
|
|
<div className="team-widget-area">
|
|
<img src="/assets/img/elements/elements25.png" alt="" className="elements21" />
|
|
<img src="/assets/img/elements/elements26.png" alt="" className="elements22" />
|
|
<div className="img1">
|
|
<img
|
|
src={member.image}
|
|
alt={member.name}
|
|
className="team-img4"
|
|
style={{ height: "280px", objectFit: "cover" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="content-area">
|
|
<Link href="/speakers-single">{member.name}</Link>
|
|
<div className="space6" />
|
|
<p>{member.post}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p>No data available for this year group.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*===== COMMUNITY DIRECTORY ENDS =======*/}
|
|
</>
|
|
);
|
|
}
|