File System

This section provides an overview of how AriaDocs handles file system view in Markdown.

The Files component allows you to display a structured file system within Markdown. It supports files, folders, highlighting, sorting, and indicators for additions or deletions.

Preview

Default File Structure

This example represents a Next.js project structure:

package.json
tsconfig.json
src
next.config.js
.gitignore

Sorted File Structure with Changes

In this example, the file system has been modified:

.gitignore
next.config.js
package.json
publicremove
srcadd
tsconfig.json

Props

type Items = Array<{ type: "file" | "folder", name: string, children?: Array, highlight?: boolean, indicator?: "add" | "delete" }>

PropTypeDefaultDescription
itemsItems[]Defines the file system structure.
sortedbooleanfalseIf true, items are sorted alphabetically.
highlightbooleanfalseHighlights a specific file for emphasis.
indicator"add" | "delete"nullDisplays an indicator for added or removed items.

Code

<Files
  items={[
    { type: "file", name: "package.json" },
    { type: "file", name: "tsconfig.json" },
    {
      type: "folder",
      name: "src",
      children: [
        { type: "file", name: "index.tsx" },
        { type: "file", name: "globals.css" },
        {
          type: "folder",
          name: "components",
          children: [
            { type: "file", name: "Navbar.tsx" },
            { type: "file", name: "Footer.tsx" },
          ],
        },
      ],
    },
    { type: "file", name: "next.config.js" },
  ]}
/>