1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos treedatafiles

File Tree Structure

Explorador de estructura de archivos y carpetas con iconos de tipo de archivo.

📁 src
📁 components
📄 Button.astro
📄 Card.astro
📄 styles.css
📄 astro.config.mjs

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { FileTreeStructure } from 'astro-component-kit';
---

<FileTreeView>Content</FileTreeView>
--- import { FileTreeStructure } from 'astro-component-kit'; --- <FileTreeView>Content</FileTreeView>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FileTreeStructure.astro:

astro 
---
---
<div class="tree">
  <div class="folder active">📁 src</div>
  <div class="indent">
    <div class="folder">📁 components</div>
    <div class="indent">
      <div class="file">📄 Button.astro</div>
      <div class="file">📄 Card.astro</div>
    </div>
    <div class="file">📄 styles.css</div>
  </div>
  <div class="file">📄 astro.config.mjs</div>
</div>
<style>
  .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; }
  .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); }
  .folder { color: #fff; font-weight: 700; cursor: pointer; }
  .folder.active { color: #818cf8; }
  .file { cursor: pointer; padding-left: 4px; }
  .file:hover { color: #fff; }
</style>
--- --- <div class="tree"> <div class="folder active">📁 src</div> <div class="indent"> <div class="folder">📁 components</div> <div class="indent"> <div class="file">📄 Button.astro</div> <div class="file">📄 Card.astro</div> </div> <div class="file">📄 styles.css</div> </div> <div class="file">📄 astro.config.mjs</div> </div> <style> .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; } .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); } .folder { color: #fff; font-weight: 700; cursor: pointer; } .folder.active { color: #818cf8; } .file { cursor: pointer; padding-left: 4px; } .file:hover { color: #fff; } </style>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
FileTreeStructure.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
treedatafiles