Editor Tab Bar

index.tsx
button.tsx
card.tsx
About this piece

Editor Tab Bar

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

Usage

The import and the props worth knowing about, in one place.

import { Editor6 } from "@/components/beste/piece/editor6";

<Editor6
  tabs={[
    {
      "filename": "index.tsx"
    },
    {
      "filename": "button.tsx",
      "active": true,
      "dirty": true
    },
    {
      "filename": "card.tsx"
    }
  ]}
/>

More Editor pieces

View all Editor
for (let $1:i = 0; $1 < $2:arr.length; $1++) {}
1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}
button.tsxSaved
Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F
Feature
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block