Family Tree Visualization

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

// Simple family tree data structure
const familyTreeData = {
  value: "Robert Johnson",
  description: "Born: 1945",
  child: [
    {
      value: "Michael Johnson",
      description: "Born: 1970 | Software Engineer",
      child: [
        {
          value: "Emma Johnson",
          description: "Born: 2000 | Student",
          child: [],
        },
        {
          value: "James Johnson",
          description: "Born: 2003 | High School",
          child: [],
        },
      ],
    },
    {
      value: "Sarah Johnson-Smith",
      description: "Born: 1972 | Doctor",
      child: [
        {
          value: "Oliver Smith",
          description: "Born: 1998 | College Graduate",
          child: [],
        },
        {
          value: "Sophia Smith",
          description: "Born: 2001 | University Student",
          child: [],
        },
      ],
    },
    {
      value: "David Johnson",
      description: "Born: 1975 | Teacher",
      child: [
        {
          value: "Lucas Johnson",
          description: "Born: 2005 | Middle School",
          child: [],
        },
      ],
    },
  ],
};

export default function FamilyTreeExample() {
  return (
    <div className="w-full">
      <TreeChart
        data={familyTreeData}
        type="right-angle"
        nodeConfig={{
          type: "node-with-description",
          color: "#f8f9fa",
          fontColor: "#333",
          width: 140,
          height: 70,
        }}
        edgeConfig={{
          color: "#8B4513",
          width: 2,
        }}
        titleConfig={{
          title: "Johnson Family Tree",
          description: "Three generations of the Johnson family",
        }}
      />
    </div>
  );
}