FileExplorer

Explorer interattivo dei moduli del boilerplate. Sinistra: tree cliccabile con tutte le cartelle. Destra: pannello di dettaglio con descrizione, ore risparmiate e checklist. Client component (usa useState).

File

components/FileExplorer.tsx

Uso base

import FileExplorer from "@/components/FileExplorer";

<FileExplorer />

Personalizzare

Tutto il contenuto vive nell'array modules in cima al file. Ogni voce ha questa shape:

type Module = {
  path: string;         // es. "/auth"
  icon: string;         // emoji
  title: string;        // titolo mostrato nel dettaglio
  hours: number;        // ore risparmiate (sommate in header)
  description: string;  // paragrafo
  items: string[];      // lista con checkmark disegnato
  highlight?: boolean;  // aggiunge badge "nuovo"
};

Aggiungi, togli, rinomina moduli per adattarli al tuo prodotto. La somma delle hours viene calcolata da totalHours e mostrata nell'header (“X ore di setup che non farai mai”).