JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="app">
    <h1>React Codebase</h1>
    <div class="code-tree" id="codeTree"></div>
  </div>

CSS

body {
  background-color: #1e1e1e;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.app {
  text-align: left;
  margin-top: 20px;
}

.component {
  margin-top: 10px;
  padding: 5px;
  border-radius: 5px;
}

.folder {
  background-color: #388e3c;
  cursor: pointer;
}

.folder.open {
  background-color: #2e7d32;
}

.file {
  background-color: #1976d2;
}

.children {
  margin-left: 20px;
}

JavaScript

const data = {
  name: "App",
  children: [
    {
      name: "Header",
      children: [
        { name: "Logo", isFile: true },
        {
          name: "Navigation",
          children: [{ name: "NavItem" }, { name: "NavItem", isFile: true }]
        }
      ]
    },
    {
      name: "Main",
      children: [
        { name: "Article", isFile: true },
        { name: "Sidebar", isFile: true }
      ]
    },
    {
      name: "Footer",
      children: [{ name: "Copyright", isFile: true }]
    }
  ]
};
function createComponent(node, isOpenByDefault = false) {
  const div = document.createElement('div');
  div.className = `component ${node.isFile ? 'file' : 'folder'} ${isOpenByDefault ? 'open' : ''}`;

  const nameDiv = document.createElement('div');
  nameDiv.innerText = node.name;
  nameDiv.addEventListener('click', (event) => {
    if (node.children) {
      div.classList.toggle('open');
      div.innerHTML = ''; // Clear existing children
      if (div.classList.contains('open')) {
        node.children.forEach(child => {
          div.appendChild(createComponent(child));
        });
      }
      event.stopPropagation();
    }
  });

  div.appendChild(nameDiv);

  if (isOpenByDefault && node.children) {
    const childrenDiv = document.createElement('div');
    childrenDiv.className = 'children';
    node.children.forEach(child => {
      childrenDiv.appendChild(createComponent(child));
    });
    div.appendChild(childrenDiv);
  }

  return div;
}

const codeTree = document.getElementById('codeTree');
codeTree.appendChild(createComponent(data, true));