83 lines
3.5 KiB
JavaScript
83 lines
3.5 KiB
JavaScript
'use client'
|
|
import React, { useState } from "react";
|
|
import { communityData } from "@/utility/constant.utils"; // make sure you rename it in your utils
|
|
export default function Section1() {
|
|
const yearGroups = Object.keys(communityData);
|
|
const [selectedYear, setSelectedYear] = useState(yearGroups[0]);
|
|
|
|
return (
|
|
<>
|
|
{/*===== COMMUNITY DIRECTORY STARTS =======*/}
|
|
<div className="blog-details-section sp1">
|
|
<div className="container">
|
|
<div className="row">
|
|
{/* Sidebar */}
|
|
<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>
|
|
|
|
{/* Right Side - Members */}
|
|
<div className="col-lg-9">
|
|
<div className="schedule-section-area sp10">
|
|
<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}>
|
|
<h4 style={{ marginTop: "30px", fontWeight: "bold" }}>{role}</h4>
|
|
<div className="row">
|
|
{members.map((member, idx) => (
|
|
<div className="col-md-4" key={idx}>
|
|
<div className="card" style={{ padding: "10px", margin: "10px", textAlign: "center", border: "1px solid #ccc", borderRadius: "10px" }}>
|
|
<img
|
|
src={member.image}
|
|
alt={member.name}
|
|
style={{ width: "100%", height: "200px", objectFit: "cover", borderRadius: "8px" }}
|
|
/>
|
|
<h5 className="blog-auhtor-details-name">{member.name}</h5>
|
|
<p className="blog-auhtor-details-post">{member.post}</p>
|
|
</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 =======*/}
|
|
</>
|
|
);
|
|
}
|