Outline Panel

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Editor12 } from "@/components/beste/piece/editor12";

<Editor12
  items={[
    {
      "label": "Dashboard",
      "kind": "class",
      "depth": 0
    },
    {
      "label": "constructor",
      "kind": "method",
      "depth": 1
    },
    {
      "label": "state",
      "kind": "prop",
      "depth": 1
    },
    {
      "label": "render",
      "kind": "method",
      "depth": 1,
      "active": true
    },
    {
      "label": "computeStats",
      "kind": "function",
      "depth": 0
    }
  ]}
/>