Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}
4 
5// Ship it

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

Import & use

import { Editor1 } from "@/components/beste/piece/editor1";

<Editor1
  filename="greet.ts"
  lines={[
    {
      "tokens": [
        {
          "text": "export",
          "kind": "keyword"
        },
        {
          "text": " "
        },
        {
          "text": "function",
          "kind": "keyword"
        },
        {
          "text": " "
        },
        {
          "text": "greet",
          "kind": "fn"
        },
        {
          "text": "(name: string) {"
        }
      ]
    },
    {
      "tokens": [
        {
          "text": "  "
        },
        {
          "text": "return",
          "kind": "keyword"
        },
        {
          "text": " "
        },
        {
          "text": "`Hello, ${name}!`",
          "kind": "string"
        },
        {
          "text": ";"
        }
      ]
    },
    {
      "tokens": [
        {
          "text": "}"
        }
      ]
    },
    {
      "tokens": []
    },
    {
      "tokens": [
        {
          "text": "// Ship it",
          "kind": "comment"
        }
      ]
    }
  ]}
/>