Simple Organizational Chart

import React from 'react';
import { TreeChart } from 'treecharts-react';

// Organization chart data structure
const organizationData = {
  value: "CEO",
  child: [
    {
      value: "Engineering",
      child: [
        {
          value: "Developers Team",
          child: [
            { value: "Frontend Team", child: [] },
            { value: "Backend Team", child: [] },
          ],
        },
        { value: "DevOps Team", child: [] },
      ],
    },
    {
      value: "Marketing",
      child: [
        { value: "Content Team", child: [] },
        { value: "Design Team", child: [] },
      ],
    },
    {
      value: "Sales",
      child: [
        { value: "Enterprise Sales", child: [] },
        { value: "SMB Sales", child: [] },
      ],
    },
  ],
};

export default function SimpleOrgChart() {
  return (
    <div className="w-full">
      <TreeChart
        data={organizationData}
        type="right-angle"
        nodeConfig={{
          color: "#4CAF50",
          fontColor: "white",
          width: 140,
          height: 50,
          fontSize: 12,
          borderRadius: 8,
        }}
        edgeConfig={{
          color: "#333",
          width: 2,
        }}
        titleConfig={{
          title: "Company Organization Chart",
          description: "Hierarchical view of company structure",
          position: {
            horizontal: "center",
            vertical: "top",
          },
        }}
        width="100%"
        height="400px"
      />
    </div>
  );
}