102 lines
3.6 KiB
JavaScript
102 lines
3.6 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 (
|
|
<>
|
|
|
|
<div className="blog-details-section sp4">
|
|
<div className="container">
|
|
<div className="row">
|
|
|
|
<div className="col-lg-3 mb-4">
|
|
<div className="space30 d-lg-none d-block" />
|
|
<div className="blog-auhtor-details">
|
|
<div className="blog-categories">
|
|
<h3 className="mb-3">Business Directory</h3>
|
|
<div className="space12" />
|
|
<ul className="list-unstyled">
|
|
{categories.map((cat) => (
|
|
<li key={cat} className="mb-2">
|
|
<button
|
|
className={`category-btn w-100 text-start ${selectedCategory === cat
|
|
? "active"
|
|
: "bg-white text-dark"
|
|
}`}
|
|
onClick={() => setSelectedCategory(cat)}
|
|
>
|
|
<span>{cat}</span>
|
|
<i className="fa-solid fa-angle-right" />
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="col-lg-9">
|
|
<div className="schedule-section-area sp10">
|
|
<div className="table-responsive shadow-sm rounded">
|
|
<table className="table table-bordered table-striped align-middle mb-0">
|
|
<thead className="table-dark">
|
|
<tr>
|
|
{tableHeaders.map((header) => (
|
|
<th key={header} className="text-nowrap">{header}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(directoryData[selectedCategory] || []).length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} className="text-center py-4 text-muted">
|
|
No data available for this category.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
directoryData[selectedCategory].map((row, idx) => (
|
|
<tr key={idx}>
|
|
<td style={{ minWidth: 120 }}>{row.services}</td>
|
|
<td style={{ minWidth: 120 }}>{row.name}</td>
|
|
<td style={{ whiteSpace: "nowrap" }}>{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>
|
|
</>
|
|
);
|
|
}
|