99 lines
3.9 KiB
JavaScript
99 lines
3.9 KiB
JavaScript
'use client'
|
|
import React, { useState } from "react";
|
|
import {directoryData} from "@/utility/constant.utils"
|
|
export default function Section1() {
|
|
const categories = Object.keys(directoryData);
|
|
const [selectedCategory, setSelectedCategory] = useState(categories[0]);
|
|
const tableHeaders = [
|
|
"Services",
|
|
"Name",
|
|
"Phone",
|
|
"Service Area",
|
|
"Location",
|
|
"Website"
|
|
];
|
|
|
|
return (
|
|
|
|
<>
|
|
{/*===== BLOG AREA STARTS =======*/}
|
|
<div className="blog-details-section sp1">
|
|
<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>Business Directory</h3>
|
|
<div className="space12" />
|
|
<ul>
|
|
{categories.map((cat) => (
|
|
<li key={cat}>
|
|
<button
|
|
className={`category-btn${selectedCategory === cat ? " active" : ""}`}
|
|
onClick={() => setSelectedCategory(cat)}
|
|
>
|
|
{cat}<span><i className="fa-solid fa-angle-right" /></span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
{tableHeaders.map((header) => (
|
|
<th key={header}>{header}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(directoryData[selectedCategory] || []).length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} style={{ textAlign: "center" }}>
|
|
No data available for this category.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
directoryData[selectedCategory].map((row, idx) => (
|
|
<tr key={idx}>
|
|
<td>{row.services}</td>
|
|
<td>{row.name}</td>
|
|
<td>{row.phone}</td>
|
|
<td>{row.serviceArea}</td>
|
|
<td>{row.location}</td>
|
|
<td>
|
|
<a href={row.website} target="_blank" rel="noopener noreferrer">
|
|
Website
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*===== BLOG AREA ENDS =======*/}
|
|
|
|
</>
|
|
)
|
|
}
|