Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #00BFA4 activityBar.activeBorder #46474A activityBar.activeFocusBorder #21252D66 activityBar.background #21252D activityBar.border #46474A activityBar.dropBorder #21252D tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #CCCCCC italic variable, string constant.other.placeholder #50C16E — constant.other.color #FFFADE — invalid, invalid.illegal #FF5050 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Lighthaus | Coding Theme
activityBar.foreground
#FFFADE
activityBar.inactiveForeground #CCCCCC
activityBarBadge.background #46474A
activityBarBadge.foreground #FFFADE
badge.background #21252D
badge.foreground #D6D6D6
button.background #47A8A1
button.border #21252D66
button.foreground #21252D
button.hoverBackground #539D99
charts.blue #47A8A1
charts.foreground #D6D6D6
charts.green #50C16E
charts.lines #8E8D8D
charts.orange #ED722E
charts.purple #D68EB2
charts.red #FF5050
charts.yellow #FFEE79
checkbox.background #21252D
checkbox.border #21252D66
debugIcon.breakpointDisabledForeground #FFEE7980
debugIcon.breakpointForeground #FFFF00
debugToolBar.background #21252D
debugToolBar.border #46474A
descriptionForeground #CCCCCC
diffEditor.border #46474A
diffEditor.diagonalFill #8E8D8D80
diffEditor.insertedTextBackground #50C16E1A
diffEditor.insertedTextBorder #21252D
diffEditor.removedTextBackground #FF50501A
diffEditor.removedTextBorder #21252D
dropdown.background #21252D
dropdown.border #21252D66
dropdown.foreground #FFFADE
dropdown.listBackground #21252D
editor.background #18191E
editor.findMatchBackground #8E8D8D66
editor.findMatchBorder #8E8D8D4D
editor.findMatchHighlightBackground #8E8D8D4D
editor.findMatchHighlightBorder #18191E
editor.findRangeHighlightBackground #DC7C4560
editor.foreground #FFFADE
editor.inactiveSelectionBackground #21252D
editor.lineHighlightBackground #21252D
editor.lineHighlightBorder #21252D
editor.rangeHighlightBackground #21252DCC
editor.rangeHighlightBorder #21252DCC
editor.selectionBackground #090B26
editor.selectionForeground #CCCCCC
editor.selectionHighlightBackground #21252D
editor.selectionHighlightBorder #21252D
editor.wordHighlightBackground #8E8D8D60
editor.wordHighlightBorder #21252D
editor.wordHighlightStrongBackground #8E8D8D99
editor.wordHighlightStrongBorder #21252D
editorBracketMatch.background #18191E
editorBracketMatch.border #ED722E
editorCodeLens.foreground #D291C1
editorCursor.background #18191E
editorCursor.foreground #FFFF00
editorError.background #18191E
editorError.border #FF5050B3
editorError.foreground #FF5050
editorGroup.border #46474A
editorGroup.dropBackground #46474A
editorGroup.emptyBackground #18191E
editorGroup.focusedEmptyBorder #21252D66
editorGroupHeader.border #21252D66
editorGroupHeader.noTabsBackground #21252D
editorGroupHeader.tabsBackground #18191E
editorGroupHeader.tabsBorder #21252D66
editorGutter.addedBackground #72B890
editorGutter.background #18191E
editorGutter.commentRangeForeground #46474A
editorGutter.deletedBackground #EC6565
editorGutter.modifiedBackground #DC7C45
editorHint.border #72B890B3
editorHint.foreground #72B890
editorHoverWidget.background #21252D
editorHoverWidget.border #8E8D8D
editorHoverWidget.statusBarBackground #18191E80
editorIndentGuide.activeBackground #8E8D8D80
editorIndentGuide.background #8E8D8DE6
editorInfo.background #18191E
editorInfo.border #D68EB2B3
editorInfo.foreground #D68EB2
editorLineNumber.activeForeground #FFFF00
editorLineNumber.foreground #CCCCCC
editorLink.activeForeground #47A8A1
editorMarkerNavigation.background #539D99AC
editorMarkerNavigationError.background #EC6565AC
editorMarkerNavigationInfo.background #72B890AC
editorMarkerNavigationWarning.background #DC7C45AC
editorOverviewRuler.addedForeground #72B890
editorOverviewRuler.background #21252D
editorOverviewRuler.border #46474A
editorOverviewRuler.bracketMatchForeground #FF4D00B3
editorOverviewRuler.commonContentForeground #FFFADE
editorOverviewRuler.currentContentForeground #FFFADE
editorOverviewRuler.deletedForeground #EC6565
editorOverviewRuler.errorForeground #FF5050
editorOverviewRuler.findMatchForeground #8E8D8D40
editorOverviewRuler.incomingContentForeground #FFFADE
editorOverviewRuler.infoForeground #D68EB2
editorOverviewRuler.modifiedForeground #DC7C45
editorOverviewRuler.rangeHighlightForeground #539D99CC
editorOverviewRuler.selectionHighlightForeground #539D99CC
editorOverviewRuler.warningForeground #ED722E
editorOverviewRuler.wordHighlightForeground #539D99CC
editorOverviewRuler.wordHighlightStrongForeground #539D99CC
editorPane.background #21252D
editorRuler.foreground #539D99
editorSuggestWidget.background #21252D
editorSuggestWidget.border #8E8D8D
editorSuggestWidget.foreground #FFFADE
editorSuggestWidget.highlightForeground #DC7C45
editorSuggestWidget.selectedBackground #090B2666
editorWarning.background #18191E
editorWarning.border #ED722EB3
editorWarning.foreground #ED722E
editorWidget.background #21252D
editorWidget.border #8E8D8D
editorWidget.foreground #FFFADE
errorForeground #FF5050
extensionButton.prominentBackground #090B26
extensionButton.prominentForeground #44B273
extensionButton.prominentHoverBackground #090B2666
focusBorder #21252D
foreground #FFFADE
gitDecoration.addedResourceForeground #50C16E
gitDecoration.conflictingResourceForeground #FC2929D9
gitDecoration.deletedResourceForeground #FF5050
gitDecoration.ignoredResourceForeground #CCCCCC
gitDecoration.modifiedResourceForeground #ED722E
gitDecoration.renamedResourceForeground #D68EB2
gitDecoration.stageDeletedResourceForeground #EC6565
gitDecoration.stageModifiedResourceForeground #DC7C45
gitDecoration.submoduleResourceForeground #47A8A1
gitDecoration.untrackedResourceForeground #FFFADE
input.background #21252D
input.border #21252D66
input.foreground #FFFADE
input.placeholderForeground #8E8D8D
inputOption.activeBackground #539D99
inputOption.activeBorder #00BFA480
inputOption.activeForeground #21252D
inputValidation.errorBackground #21252D
inputValidation.errorBorder #21252D66
inputValidation.errorForeground #FC2929
inputValidation.infoBackground #21252D
inputValidation.infoBorder #21252D66
inputValidation.infoForeground #44B273
inputValidation.warningBackground #21252D
inputValidation.warningBorder #21252D66
inputValidation.warningForeground #E25600
list.activeSelectionBackground #21252DCC
list.activeSelectionForeground #47A8A1
list.dropBackground #00BFA4
list.errorForeground #FF5050D9
list.filterMatchBackground #D6D6D6
list.filterMatchBorder #21252D66
list.focusBackground #46474A
list.focusForeground #D6D6D6
list.focusOutline #21252D
list.highlightForeground #FFFADE
list.hoverBackground #46474A
list.hoverForeground #FFFADE
list.inactiveFocusBackground #46474A
list.inactiveFocusOutline #21252D66
list.inactiveSelectionBackground #46474A
list.inactiveSelectionForeground #FFFADE
list.invalidItemForeground #EC6565
list.warningForeground #ED722ED9
listFilterWidget.noMatchesOutline
menu.background #21252D
menu.border #46474A
menu.foreground #CCCCCC
menu.selectionBackground #D6D6D6CC
menu.selectionBorder #46474A
menu.selectionForeground #44B273
menu.separatorBackground #46474A
menubar.selectionBackground #21252D
menubar.selectionBorder #46474A
menubar.selectionForeground #FFFADE
merge.border #21252D
merge.commonContentBackground #18191E
merge.commonHeaderBackground #18191E
merge.currentContentBackground #5AD1AA80
merge.currentHeaderBackground #5AD1AABF
merge.incomingContentBackground #50C16E80
merge.incomingHeaderBackground #50C16EBF
minimap.background #21252D
minimap.errorHighlight #FF5050
minimap.findMatchHighlight #FFFF00
minimap.selectionHighlight #18191E80
minimap.warningHighlight #ED722E
minimapGutter.addedBackground #72B890
minimapGutter.deletedBackground #EC6565
minimapGutter.modifiedBackground #DC7C45
minimapSlider.activeBackground #21252D80
minimapSlider.background #21252D99
minimapSlider.hoverBackground #CCCCCC99
notificationCenter.border #46474A
notificationCenterHeader.background #21252D
notificationCenterHeader.foreground #00BFA4
notificationLink.foreground #D68EB2
notifications.background #21252D
notifications.border #46474A
notifications.foreground #FFFADE
notificationsErrorIcon.foreground #FC2929
notificationsInfoIcon.foreground #44B273
notificationsWarningIcon.foreground #E25600
notificationToast.border #46474A
panel.background #18191E
panel.border #46474A
panelInput.border #46474A
panelSection.border #46474A
panelTitle.activeBorder #46474A
panelTitle.activeForeground #FFFF00
panelTitle.inactiveForeground #FFFADE
peekView.border #21252D66
peekViewEditor.background #21252D
peekViewEditor.matchHighlightBackground #090B26
peekViewEditor.matchHighlightBorder #21252D
peekViewEditorGutter.background #21252D
peekViewResult.background #21252D
peekViewResult.fileForeground #47A8A1
peekViewResult.lineForeground #8E8D8D
peekViewResult.matchHighlightBackground #21252D
peekViewResult.selectionBackground #090B26
peekViewResult.selectionForeground #FF4D00
peekViewTitle.background #21252D
peekViewTitleDescription.foreground #FFFADE
peekViewTitleLabel.foreground #47A8A1
pickerGroup.border #46474A
pickerGroup.foreground #FFFADE
problemsErrorIcon.foreground #FC2929
problemsInfoIcon.foreground #44B273
problemsWarningIcon.foreground #E25600
progressBar.background #42BDAB
quickInput.background #21252D
quickInput.foreground #FFFADE
quickInputList.focusBackground #21252D4D
quickInputTitle.background #21252D
scrollbar.shadow #8E8D8D4D
scrollbarSlider.activeBackground #8E8D8D
scrollbarSlider.background #8E8D8D99
scrollbarSlider.hoverBackground #8E8D8D
settings.checkboxBackground #21252D
settings.checkboxBorder #21252D66
settings.checkboxForeground #00BFA4
settings.dropdownBackground #21252D
settings.dropdownBorder #21252D66
settings.dropdownForeground #FFFADE
settings.dropdownListBorder #21252D66
settings.headerForeground #44B273
settings.modifiedItemIndicator #ED722E
settings.textInputBackground #21252D
settings.textInputForeground #FFFADE
sideBar.background #21252D
sideBar.border #21252D
sideBar.dropBackground #21252D
sideBar.foreground #FFFADE
sideBarSectionHeader.background #46474A
sideBarSectionHeader.border #21252D
sideBarSectionHeader.foreground #D6D6D6
sideBarTitle.foreground #00BFA4
statusBar.background #21252D
statusBar.border #21252DCC
statusBar.debuggingBackground #47A8A166
statusBar.debuggingBorder #46474A
statusBar.debuggingForeground #FFFADE
statusBar.foreground #FFEE79
statusBar.noFolderBackground #21252D
statusBar.noFolderBorder #46474A
statusBar.noFolderForeground #FFFADE
statusBarItem.activeBackground #D6D6D666
statusBarItem.errorBackground #EC6565AC
statusBarItem.errorForeground #21252D
statusBarItem.hoverBackground #D6D6D68C
statusBarItem.prominentBackground #18191E80
statusBarItem.prominentForeground #FFEE79
statusBarItem.prominentHoverBackground #D6D6D68C
tab.activeBackground #18191EBF
tab.activeBorder #18191E
tab.activeBorderTop #21252D66
tab.activeForeground #FFEE79
tab.activeModifiedBorder #46474A80
tab.border #21252D66
tab.hoverBackground #8E8D8D
tab.hoverBorder #21252D
tab.hoverForeground #D6D6D6
tab.inactiveBackground #21252D
tab.inactiveForeground #8E8D8D
tab.inactiveModifiedBorder #21252D
tab.lastPinnedBorder #D16BB7
tab.unfocusedActiveBackground #21252D
tab.unfocusedActiveBorder #21252D66
tab.unfocusedActiveBorderTop #21252D66
tab.unfocusedActiveForeground #D6D6D6
tab.unfocusedActiveModifiedBorder #46474A80
tab.unfocusedHoverBackground #21252D
tab.unfocusedHoverBorder #21252D
tab.unfocusedHoverForeground #D6D6D6CC
tab.unfocusedInactiveBackground #18191E
tab.unfocusedInactiveForeground #CCCCCCAA
tab.unfocusedInactiveModifiedBorder #46474A80
terminal.ansiBlack #18191E
terminal.ansiBlue #1D918B
terminal.ansiBrightBlack #8E8D8D
terminal.ansiBrightBlue #47A8A1
terminal.ansiBrightCyan #5AD1AA
terminal.ansiBrightGreen #50C16E
terminal.ansiBrightMagenta #D68EB2
terminal.ansiBrightRed #FF5050
terminal.ansiBrightWhite #FFFADE
terminal.ansiBrightYellow #ED722E
terminal.ansiCyan #00BFA4
terminal.ansiGreen #44B273
terminal.ansiMagenta #D16BB7
terminal.ansiRed #FC2929
terminal.ansiWhite #CCCCCC
terminal.ansiYellow #E25600
terminal.foreground #FFEE79
terminal.selectionBackground #090B26
terminalCursor.background #18191E
terminalCursor.foreground #FFFF00
textBlockQuote.background #8E8D8D
textBlockQuote.border #46474A
textCodeBlock.background #21252D
textLink.activeForeground #D291C1
textLink.foreground #D68EB2
textPreformat.foreground #FFFADE
textSeparator.foreground #46474A
titleBar.activeBackground #18191EBF
titleBar.activeForeground #FFFADE
titleBar.border #21252D
titleBar.inactiveBackground #21252D
titleBar.inactiveForeground #CCCCCC
tree.indentGuidesStroke #D6D6D6
tree.tableColumnsBorder #21252D66
welcomePage.background #21252D
welcomePage.progress.background #21252D
welcomePage.progress.foreground #42BDAB
welcomePage.tileBackground #FFFADE
welcomePage.tileHoverBackground #21252D66 keyword.control, meta.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #539D99 —
punctuation, punctuation.definition.separator, punctuation.definition.parameters #D6D6D6 —
entity.name.tag, punctuation.definition.tag, meta.tag.sgml #50C16E —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #47A8A1 —
meta.block variable.other #D6D6D6 —
support.other.variable, string.other.link #D6D6D6 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #D68EB2 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #47A8A1 —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #DC7C45 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #D6D6D6 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #5AD1AA —
variable.language #47A8A1 italic
entity.name.method.js #47A8A1 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #1D918B —
entity.other.attribute-name #D68EB2 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFEE79 italic
entity.other.attribute-name.class #FFEE79 —
source.sass keyword.control #44B273 —
constant.character.escape #50C16E —
*url*, *link*, *uri* #D6D6D6 —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #D68EB2 italic
source.js constant.other.object.key.js string.unquoted.label.js #47A8A1 italic
support.class.dart #50C16E —
entity.name.function.dart #DC7C45 —
keyword.other.import.dart #D68EB2 —
punctuation.dot.dart #D6D6D6 —
string.interpolated.single.dart, string.interpolated.double.dart #72B890 —
storage.type.primitive.dart, storage.type.annotation.dart #00BFA4 —
entity.name.package.go #DC7C45 —
storage.type.go, storage.type.boolean.go, storage.type.byte.go, storage.type.error.go, storage.type.numeric.go, storage.type.rune.go, storage.type.string.go, storage.type.uintptr.go #50C16E —
keyword.import.go, keyword.package.go #1D918B —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #D6D6D6 —
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json #CCCCCC —
support.type.property-name.json #ED722E —
string.quoted.double.json #72B890 —
text.html.markdown, punctuation.definition.list_item.markdown #D6D6D6 —
text.html.markdown markup.inline.raw.markdown #D16BB7E6 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #CCCCCC —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #5AD1AA bold
markup.italic #D6D6D6 italic
markup.bold, markup.bold string #D6D6D6 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #CCCCCC bold
markup.underline #D6D6D6 underline
markup.quote punctuation.definition.blockquote.markdown #44B273 —
markup.quote #44B273 italic
string.other.link.title.markdown #D16BB7E6 —
markup.underline.link.markdown, markup.underline.link.image.markdown #CCCCCC —
string.other.link.description.title.markdown #D68EB2 —
constant.other.reference.link.markdown #D68EB2 —
punctuation.definition.fenced.markdown #FFFADE —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #D6D6D6 —
variable.language.fenced.markdown #8E8D8D —
meta.separator #1D918B bold
source.python entity.name.function.decorator, source.python meta.function.decorator support.type #DC7C45 —
source.python constant #D6D6D6 —
source.python constant.other #FFFADE —
source.python meta.function-call.generic #DC7C45 —
source.python variable.parameter.function.language #D6D6D6 —
source.python meta.function.parameters variable.parameter.function.language.special.self #DC7C45 —
punctuation.separator.parameters.python #CCCCCC —
source.python keyword.operator.logical.python #D16BB7 —
support.variable.magic.python #FFEE79 —
constant.character.format.placeholder.other.python storage #FFFADE —
source.python support.type #50C16E —
source.python variable.parameter #DC7C45 —
meta.attribute.rust #FFEE79 —
storage.type.rust, storage.type.module.rust #5AD1AA —
support.function.sql #00BFA4 —
keyword.other.sql #DC7C45 —
punctuation.definition.string.end.sql, punctuation.definition.string.begin.sql #44B273 —
string.quoted.single.sql, string.quoted.double.sql #72B890 —
keyword.other.verb.sql #CCCCCC —
constant.other.boolean.toml #42BDAB —
entity.other.attribute-name.table.toml, punctuation.definition.table.toml, entity.other.attribute-name.table.array.toml, punctuation.definition.table.array.toml #D68EB2 —
variable.key.table.toml, variable.key.toml, variable.key.array.table.toml, variable.other.key.toml #D6D6D6 —
string.quoted.single.basic.line.toml, string.quoted.single.literal.line.toml #72B890 —
punctuation.definition.anchor.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.keyValuePair.toml #DC7C45 —
source.yaml entity.name.tag #FFFADE —
punctuation.separator.key-value.mapping.yaml #8E8D8D —
punctuation.definition.string.begin.yaml, punctuation.definition.string.end.yaml #44B273 —
string.quoted.single.yaml, string.quoted.double.yaml #72B890 —
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.unquoted.block.yaml #44B273 —
export interface User {
id : string;
name : string;
role : " admin " | " member " ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string) : Promise < User | null> {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response.ok ) {
throw new Error ( ` HTTP ${ response.status }` ) ;
}
return ( await response. json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user.name } ! ` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string;
name : string;
role : " admin " | " member " ;
tags : string [] ;
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string) : Promise < User | null> {
if ( ! id ) {
return null ;
}
const response = await fetch ( ` /api/users/ ${ id }` , {
method : " GET " ,
headers : { Accept : " application/json " },
} ) ;
if ( ! response.ok ) {
throw new Error ( ` HTTP ${ response.status }` ) ;
}
return ( await response. json ()) as User ;
}
function greet ( user : User ) : string {
// Simple greeting function that uses the user's name
return ` Hello, ${ user.name } ! ` ;
}