Project Structure Visualization

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

// Simple project folder structure
const projectStructureData = {
  value: "react-app",
  nodeConfig: {
    type: "custom" as const,
    customAttributes: {
      d: "M 10,15 L 10,50 L 70,50 L 70,25 L 60,15 L 10,15 Z M 10,15 L 50,15 L 60,25 L 10,25 Z",
    },
  },
  child: [
    {
      value: "public",
      nodeConfig: {
        type: "custom" as const,
        customAttributes: {
          d: "M 10,15 L 10,50 L 70,50 L 70,25 L 60,15 L 10,15 Z M 10,15 L 50,15 L 60,25 L 10,25 Z",
        },
      },
      child: [
        {
          value: "index.html",
          nodeConfig: {
            type: "custom" as const,
            color: "#E34F26",
            borderColor: "#C1341A",
            customAttributes: {
              d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
            },
          },
          child: [],
        },
      ],
    },
    {
      value: "src",
      nodeConfig: {
        type: "custom" as const,
        customAttributes: {
          d: "M 10,15 L 10,50 L 70,50 L 70,25 L 60,15 L 10,15 Z M 10,15 L 50,15 L 60,25 L 10,25 Z",
        },
      },
      child: [
        {
          value: "components",
          nodeConfig: {
            type: "custom" as const,
            customAttributes: {
              d: "M 10,15 L 10,50 L 70,50 L 70,25 L 60,15 L 10,15 Z M 10,15 L 50,15 L 60,25 L 10,25 Z",
            },
          },
          child: [
            {
              value: "Header.jsx",
              nodeConfig: {
                type: "custom" as const,
                color: "#61DAFB",
                borderColor: "#21A5C4",
                customAttributes: {
                  d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
                },
              },
              child: [],
            },
            {
              value: "Button.jsx",
              nodeConfig: {
                type: "custom" as const,
                color: "#61DAFB",
                borderColor: "#21A5C4",
                customAttributes: {
                  d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
                },
              },
              child: [],
            },
          ],
        },
        {
          value: "pages",
          nodeConfig: {
            type: "custom" as const,
            customAttributes: {
              d: "M 10,15 L 10,50 L 70,50 L 70,25 L 60,15 L 10,15 Z M 10,15 L 50,15 L 60,25 L 10,25 Z",
            },
          },
          child: [
            {
              value: "Home.jsx",
              nodeConfig: {
                type: "custom" as const,
                color: "#61DAFB",
                borderColor: "#21A5C4",
                customAttributes: {
                  d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
                },
              },
              child: [],
            },
            {
              value: "About.jsx",
              nodeConfig: {
                type: "custom" as const,
                color: "#61DAFB",
                borderColor: "#21A5C4",
                customAttributes: {
                  d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
                },
              },
              child: [],
            },
          ],
        },
        {
          value: "App.jsx",
          nodeConfig: {
            type: "custom" as const,
            color: "#61DAFB",
            borderColor: "#21A5C4",
            customAttributes: {
              d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
            },
          },
          child: [],
        },
      ],
    },
    {
      value: "package.json",
      nodeConfig: {
        type: "custom" as const,
        color: "#68A063",
        borderColor: "#5A8B56",
        customAttributes: {
          d: "M 15,10 L 15,50 L 65,50 L 65,20 L 55,10 L 15,10 Z M 55,10 L 55,20 L 65,20",
        },
      },
      child: [],
    },
  ],
};

export default function ProjectStructureExample() {
  return (
    <div className="w-full">
      <TreeChart
        data={projectStructureData}
        type="right-angle"
        verticalAlign="left"
        horizontalGap={120}
        verticalGap={60}
        nodeConfig={{
          type: "custom",
          width: 80,
          height: 60,
          color: "#3B82F6",
          fontColor: "white",
          borderColor: "#1E40AF",
          borderWidth: 2,
          fontSize: 11,
        }}
        edgeConfig={{
          color: "#6B7280",
          width: 2,
        }}
        titleConfig={{
          title: "React Project Structure",
          description: "Modern web application folder hierarchy",
        }}
      />
    </div>
  );
}