File Tree Structure

'use client';

import './FileTreeView.css';

/** FileTreeView — ported from astro-component-kit. */
export interface FileTreeViewProps {
}

export function FileTreeView({}: FileTreeViewProps) {
  return (
    <>
      <div className="tree" data-rk-7f8c09="">
        <div className="folder active" data-rk-7f8c09="">📁 src</div>
        <div className="indent" data-rk-7f8c09="">
          <div className="folder" data-rk-7f8c09="">📁 components</div>
          <div className="indent" data-rk-7f8c09="">
            <div className="file" data-rk-7f8c09="">📄 Button.astro</div>
            <div className="file" data-rk-7f8c09="">📄 Card.astro</div>
          </div>
          <div className="file" data-rk-7f8c09="">📄 styles.css</div>
        </div>
        <div className="file" data-rk-7f8c09="">📄 astro.config.mjs</div>
      </div>
    </>
  );
}

export default FileTreeView;

/* FileTreeView — ported from astro-component-kit (data/FileTreeView.astro) */

.tree:where([data-rk-7f8c09]) { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; }
.indent:where([data-rk-7f8c09]) { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); }
.folder:where([data-rk-7f8c09]) { color: #fff; font-weight: 700; cursor: pointer; }
.folder.active:where([data-rk-7f8c09]) { color: #818cf8; }
.file:where([data-rk-7f8c09]) { cursor: pointer; padding-left: 4px; }
.file:hover:where([data-rk-7f8c09]) { color: #fff; }