Branch Switcher

About this piece

Branch picker popover with search, a list of branches, ahead counts, and an emerald check on the current one.

Usage

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

import { Editor24 } from "@/components/beste/piece/editor24";

<Editor24
  current="feat/onboarding"
  branches={[
    {
      "name": "feat/onboarding",
      "current": true
    },
    {
      "name": "main"
    },
    {
      "name": "feat/ai-suggest",
      "ahead": 3
    },
    {
      "name": "chore/cleanup"
    }
  ]}
/>

More Editor pieces

View all Editor

Theme

Theme Switcher

Settings card with a segmented light / dark / system toggle and icon plus label per option.

File Tree

Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.

10import { greet } from './greet';
11 
12const user = { name: 'Ayşe' };
13const msg = greet(user.name);
14console.log(msg);
15

Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

hero181

Portrait Hero

Tall photograph beside a heading, a short paragraph and a checked benefit list.

Section Picker Card

One card from a block picker. Its preview loads behind a sweeping skeleton while the section id, title and description sit ready underneath, the way a picker fills a grid.

user.

idstring
namestring
emailstring
isAdminboolean
save(): Promise<void>

IntelliSense

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.

40const users = load();
41for (const user of users) {12×
42  render(user);
43}

Breakpoint Gutter

Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.