import React, { useState } from "react";
import { FaChevronDown, FaChevronRight } from "react-icons/fa";
const TreeNode = ({ node }) => {
const [isExpanded, setIsExpanded] = useState(false);
const handleToggle = () => {
setIsExpanded(!isExpanded);
};
return (
<div className="">
<div
onClick={handleToggle}
className="flex items-center px-4 group rounded-md hover:text-blue-600 hover:bg-blue-200 text-base font-serif">
{Object.keys(node).length > 1 ? (
<span className="mr-2 text-xs ">
{isExpanded ? <FaChevronDown /> : <FaChevronRight />}
</span>
) : (
<span className="ml-5"></span>
)}
{node.name}
</div>
{isExpanded && (
<div className="ml-5 ">
{Object.keys(node).map((key) => {
if (Array.isArray(node[key])) {
return node[key].map((child) => (
<TreeNode key={child.name} node={child} />
));
}
return null;
})}
</div>
)}
</div>
);
};
// Define the Tree component
const Tree = ({ data }) => {
return (
<div className="">
{data.map((node) => (
<TreeNode key={node.id} node={node} />
))}
</div>
);
};
const states = [
{
name: "Gujarat",
districts: [
{
name: "Surat",
cities: [
{
name: "varachha",
area: [
{ name: "yogivhowk" },
{ name: "varachha" },
{ name: "puna" },
],
},
{
name: "kamrej",
area: [{ name: "tapi" }, { name: "choryashi" }],
},
],
},
{ name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
],
},
{
name: "Rajasthan",
districts: [
{
name: "Surat",
cities: [
{
name: "varachha",
area: [
{ name: "yogivhowk" },
{ name: "varachha" },
{ name: "puna" },
],
},
{
name: "kamrej",
},
],
},
{ name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
],
},
{
name: "Bihar",
districts: [
{
name: "Surat",
cities: [
{
name: "varachha",
area: [
{ name: "yogivhowk" },
{ name: "varachha" },
{ name: "puna" },
],
},
{
name: "kamrej",
},
],
},
{ name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
],
},
{
name: "delhi",
districts: [
{
name: "Surat",
cities: [
{
name: "varachha",
area: [
{ name: "yogivhowk" },
{ name: "varachha" },
{ name: "puna" },
],
},
{
name: "kamrej",
},
],
},
{ name: "Rajkot", cities: [{ name: "jetpur" }, { name: "gondal" }] },
],
},
];
function App() {
return (
<div className="flex flex-col w-60 h-96 border border-gray-300 rounded-md p-4 m-auto mt-52 overflow-y-scroll bg-blue-50">
<Tree data={states} />
</div>
);
}
export default App;
