export function greet(name: string) {return `Hello, ${name}!`;}// Ship it
Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.
The import and the props worth knowing about, in one place.
import { Editor1 } from "@/components/beste/piece/editor1";
<Editor1
surface="card"
bordered={false}
inverted={false}
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"
}
]
}
]}
/>