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 #1f2326 activityBar.activeBorder #a04b52 activityBar.activeFocusBorder #363a3d activityBar.background #1f2326 activityBar.border #363a3d activityBar.dropBorder #44484b40 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.constant, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, variable.other.constant, entity.other.attribute-name.id, support.class.component #98A1A9 constant.language.null, keyword.other.important, keyword.control.at-rule, keyword.operator #AA9AA8 keyword.control, storage.type.function, keyword.operator.logical, storage.type #AA9AA8 italic entity.name.function, support.function.misc, constant.character.escape
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground
#a4a9ac
activityBar.inactiveForeground #44484b
activityBarBadge.background #a04b52
activityBarBadge.foreground #c2c7ca
badge.background #a04b52
badge.foreground #c2c7ca
banner.background #1f2326
banner.foreground #a4a9ac
banner.iconForeground #c2c7ca
breadcrumb.activeSelectionForeground #a4a9ac
breadcrumb.background #24282B
breadcrumb.focusForeground #c2c7ca
breadcrumb.foreground #a4a9ac
breadcrumbPicker.background #1f2326
button.background #a04b52
button.border #0000
button.foreground #c2c7ca
button.hoverBackground #AD5259
button.secondaryBackground #363a3d
button.secondaryForeground #c2c7ca
button.secondaryHoverBackground #44484b
charts.blue #98A1A9
charts.foreground #a4a9ac
charts.green #A3B694
charts.lines #a4a9ac
charts.orange #D08770
charts.purple #AA9AA8
charts.red #B26C72
charts.yellow #E6CB92
checkbox.background #1f2326
checkbox.border #a4a9ac40
checkbox.foreground #c2c7ca
debugConsole.errorForeground #A04B52
debugConsole.infoForeground #98A1A9
debugConsole.sourceForeground #a4a9ac
debugConsole.warningForeground #e6cb92
debugConsoleInputIcon.foreground #a4a9ac
debugExceptionWidget.background #B26C72
debugExceptionWidget.border #B26C72
debugIcon.breakpointCurrentStackframeForeground #E6CB92
debugIcon.breakpointDisabledForeground #565a5d
debugIcon.breakpointForeground #B26C72
debugIcon.breakpointStackframeForeground #A3B694
debugIcon.breakpointUnverifiedForeground #a4a9ac
debugIcon.continueForeground #98A1A9
debugIcon.disconnectForeground #D08770
debugIcon.pauseForeground #98A1A9
debugIcon.restartForeground #A3B694
debugIcon.startForeground #A3B694
debugIcon.stepBackForeground #98A1A9
debugIcon.stepIntoForeground #98A1A9
debugIcon.stepOutForeground #98A1A9
debugIcon.stepOverForeground #98A1A9
debugIcon.stopForeground #D08770
debugTokenExpression.boolean #98A1A9
debugTokenExpression.error #A04B52
debugTokenExpression.name #AA9AA8
debugTokenExpression.number #D08770
debugTokenExpression.string #A3B694
debugTokenExpression.value #a4a9ac
debugToolBar.background #1f2326
debugToolBar.border #363a3d
debugView.exceptionLabelBackground #B26C72
debugView.exceptionLabelForeground #a4a9ac
debugView.stateLabelBackground #565a5d
debugView.stateLabelForeground #a4a9ac
debugView.valueChangedHighlight #98A1A9
descriptionForeground #a4a9ac
diffEditor.border #363a3d
diffEditor.diagonalFill #c2c7ca33
diffEditor.insertedTextBackground #8EFF3D12
diffEditor.removedTextBackground #FF4D5B12
dropdown.background #32353B
dropdown.border #363a3d
dropdown.foreground #a4a9ac
dropdown.listBackground #1f2326
editor.background #24282B
editor.findMatchBackground #c2c7ca40
editor.findMatchHighlightBackground #c2c7ca10
editor.findRangeHighlightBackground #c2c7ca10
editor.focusedStackFrameHighlightBackground #A3B694
editor.foldBackground #2c3033
editor.foreground #a4a9ac
editor.hoverHighlightBackground #c2c7ca10
editor.inactiveSelectionBackground #c2c7ca0F
editor.inlineValuesBackground #D0877066
editor.inlineValuesForeground #c2c7ca80
editor.lineHighlightBackground #2c3033
editor.lineHighlightBorder #2c3033
editor.linkedEditingBackground #B26C7280
editor.rangeHighlightBackground #c2c7ca10
editor.rangeHighlightBorder #0000
editor.selectionBackground #c2c7ca10
editor.selectionHighlightBackground #c2c7ca10
editor.snippetFinalTabstopHighlightBackground #c2c7ca4d
editor.snippetFinalTabstopHighlightBorder #c2c7ca80
editor.snippetTabstopHighlightBackground #a4a9ac4d
editor.stackFrameHighlightBackground #E6CB9280
editor.symbolHighlightBackground #363a3d
editor.wordHighlightBackground #c2c7ca10
editor.wordHighlightStrongBackground #c2c7ca10
editorActiveLineNumber.foreground #565a5d
editorBracketMatch.background #0000
editorBracketMatch.border #c2c7ca40
editorCodeLens.foreground #a4a9ac
editorCursor.background #c2c7ca
editorCursor.foreground #b26c72
editorError.background #0000
editorError.foreground #A04B52
editorGhostText.border #0000
editorGhostText.foreground #565a5d
editorGroup.border #363a3d
editorGroup.dropBackground #44484b40
editorGroup.emptyBackground #1f2326
editorGroupHeader.border #363a3d
editorGroupHeader.noTabsBackground #1f2326
editorGroupHeader.tabsBackground #1f2326
editorGroupHeader.tabsBorder #363a3d
editorGutter.addedBackground #a3b69480
editorGutter.background #24282B
editorGutter.commentRangeForeground #a4a9ac
editorGutter.deletedBackground #B26C7280
editorGutter.foldingControlForeground #565a5d
editorGutter.modifiedBackground #98a1a980
editorHint.foreground #a4a9ac
editorHoverWidget.background #1f2326
editorHoverWidget.border #363a3d
editorHoverWidget.foreground #a4a9ac
editorHoverWidget.statusBarBackground #363a3d
editorIndentGuide.activeBackground #c2c7ca40
editorIndentGuide.background #c2c7ca20
editorInfo.foreground #98A1A9
editorInlayHint.background #c2c7caF2
editorInlayHint.foreground #a04b52cc
editorLightBulb.foreground #E6CB92
editorLightBulbAutoFix.foreground #98A1A9
editorLineNumber.activeForeground #a4a9ac
editorLineNumber.foreground #565a5d
editorLink.activeForeground #98A1A9
editorMarkerNavigation.background #1f2326
editorMarkerNavigationError.background #A04B52
editorMarkerNavigationInfo.background #98A1A9
editorMarkerNavigationWarning.background #e6cb92
editorOverviewRuler.addedForeground #a3b69480
editorOverviewRuler.background #24282B
editorOverviewRuler.border #363a3d
editorOverviewRuler.bracketMatchForeground #a4a9ac
editorOverviewRuler.commonContentForeground #c2c7ca40
editorOverviewRuler.currentContentForeground #98A1A9
editorOverviewRuler.deletedForeground #B26C7280
editorOverviewRuler.errorForeground #A04B5280
editorOverviewRuler.findMatchForeground #363a3d
editorOverviewRuler.incomingContentForeground #98A1A980
editorOverviewRuler.infoForeground #98A1A9
editorOverviewRuler.modifiedForeground #98a1a980
editorOverviewRuler.rangeHighlightForeground #c2c7ca60
editorOverviewRuler.selectionHighlightForeground #c2c7ca60
editorOverviewRuler.warningForeground #e6cb9280
editorOverviewRuler.wordHighlightForeground #c2c7ca60
editorOverviewRuler.wordHighlightStrongForeground #c2c7ca60
editorPane.background #1f2326
editorRuler.foreground #a4a9ac
editorSuggestWidget.background #1f2326
editorSuggestWidget.border #363a3d
editorSuggestWidget.focusHighlightForeground #b26c72
editorSuggestWidget.foreground #a4a9ac
editorSuggestWidget.highlightForeground #b26c72
editorSuggestWidget.selectedBackground #24282B
editorSuggestWidget.selectedForeground #c2c7ca
editorSuggestWidget.selectedIconForeground #c2c7ca
editorUnnecessaryCode.border #0000
editorUnnecessaryCode.opacity #44484b
editorWarning.foreground #e6cb92
editorWhitespace.foreground #44484b
editorWidget.background #1f2326
editorWidget.border #b26c72
editorWidget.foreground #a4a9ac
errorForeground #A04B52
extensionBadge.remoteBackground #a04b52
extensionBadge.remoteForeground #c2c7ca
extensionButton.prominentBackground #a04b52
extensionButton.prominentForeground #c2c7ca
extensionButton.prominentHoverBackground #AD5259
extensionIcon.starForeground #a4a9ac
focusBorder #0000
foreground #a4a9ac
gitDecoration.addedResourceForeground #a3b694
gitDecoration.conflictingResourceForeground #B26C72
gitDecoration.deletedResourceForeground #B26C72
gitDecoration.ignoredResourceForeground #565a5d
gitDecoration.modifiedResourceForeground #98a1a9
gitDecoration.renamedResourceForeground #E6CB92
gitDecoration.stageDeletedResourceForeground #B26C72
gitDecoration.stageModifiedResourceForeground #98a1a9
gitDecoration.submoduleResourceForeground #c2c7ca
gitDecoration.untrackedResourceForeground #A3B694
icon.foreground #a4a9ac
inlineTitleBar.background #1f2326
input.background #1f2326
input.border #1f2326
input.foreground #a4a9ac
input.placeholderForeground #565a5d
inputOption.activeBackground #a04b52
inputOption.activeBorder #0000
inputOption.activeForeground #c2c7ca
inputValidation.errorBackground #A04B52
inputValidation.errorBorder #A04B52
inputValidation.errorForeground #24282B
inputValidation.infoBackground #a04b52
inputValidation.infoBorder #a04b52
inputValidation.infoForeground #c2c7ca
inputValidation.warningBackground #e6cb92
inputValidation.warningBorder #e6cb92
inputValidation.warningForeground #24282B
interactive.activeCodeBorder #363a3d
interactive.inactiveCodeBorder #0000
keybindingLabel.background #363a3d
keybindingLabel.border #363a3d
keybindingLabel.bottomBorder #0000
keybindingLabel.foreground #a4a9ac
list.activeSelectionBackground #c2c7ca20
list.activeSelectionForeground #c2c7ca
list.activeSelectionIconForeground #c2c7ca
list.deemphasizedForeground #565a5d
list.dropBackground #44484b40
list.errorForeground #A04B52
list.filterMatchBackground #c2c7ca10
list.filterMatchBorder #0000
list.focusBackground #c2c7ca10
list.focusForeground #c2c7ca
list.focusHighlightForeground #b26c72
list.focusOutline #0000
list.highlightForeground #b26c72
list.hoverBackground #c2c7ca10
list.hoverForeground #fff
list.inactiveSelectionBackground #0000
list.invalidItemForeground #D08770
list.warningForeground #e6cb92
listFilterWidget.background #c2c7ca10
listFilterWidget.noMatchesOutline #B26C7260
listFilterWidget.outline #0000
menu.background #1f2326
menu.border #363a3d
menu.foreground #a4a9ac
menu.selectionBackground #24282B
menu.selectionBorder #24282B
menu.selectionForeground #c2c7ca
menu.separatorBackground #44484b
menubar.selectionBackground #24282B
menubar.selectionBorder #0000
menubar.selectionForeground #c2c7ca
merge.commonContentBackground #a4a9ac26
merge.commonHeaderBackground #a4a9ac66
merge.currentContentBackground #98A1A933
merge.currentHeaderBackground #98A1A980
merge.incomingContentBackground #98A1A933
merge.incomingHeaderBackground #98A1A980
minimap.background #24282B
minimap.errorHighlight #A04B5240
minimap.findMatchHighlight #c2c7ca40
minimap.selectionHighlight #c2c7ca20
minimap.warningHighlight #e6cb9280
minimapGutter.addedBackground #a3b69480
minimapGutter.deletedBackground #B26C7280
minimapGutter.modifiedBackground #98a1a980
minimapSlider.activeBackground #c2c7ca2B
minimapSlider.background #c2c7ca12
minimapSlider.hoverBackground #c2c7ca26
notebook.cellBorderColor #0000
notebook.cellEditorBackground #a4a9ac0d
notebook.cellHoverBackground #0000
notebook.cellInsertionIndicator #0000
notebook.cellStatusBarItemHoverBackground #c2c7ca40
notebook.cellToolbarSeparator #c2c7ca59
notebook.focusedCellBackground #0000
notebook.focusedCellBorder #0000
notebook.focusedEditorBorder #0000
notebook.inactiveFocusedCellBorder #0000
notebook.inactiveSelectedCellBorder #0000
notebook.selectedCellBackground #0000
notebook.selectedCellBorder #0000
notebook.symbolHighlightBackground #c2c7ca0D
notebookScrollbarSlider.activeBackground #c2c7ca60
notebookScrollbarSlider.background #c2c7ca40
notebookScrollbarSlider.hoverBackground #c2c7ca50
notebookStatusErrorIcon.foreground #A04B52
notebookStatusRunningIcon.foreground #c2c7ca
notebookStatusSuccessIcon.foreground #A3B694
notificationCenter.border #363a3d
notificationCenterHeader.background #1f2326
notificationCenterHeader.foreground #a4a9ac
notificationLink.foreground #98A1A9b6
notifications.background #1f2326
notifications.border #363a3d
notifications.foreground #a4a9ac
notificationsErrorIcon.foreground #A04B52
notificationsInfoIcon.foreground #98A1A9
notificationsWarningIcon.foreground #e6cb92
panel.background #24282B
panel.border #363a3d
panel.dropBorder #0000
panelInput.border #24282B
panelSection.border #363a3d
panelSection.dropBackground #24282B
panelSectionHeader.background #24282B
panelSectionHeader.foreground #a4a9ac
panelTitle.activeBorder #c2c7ca
panelTitle.activeForeground #c2c7ca
panelTitle.inactiveForeground #a4a9ac
peekView.border #363a3d
peekViewEditor.background #24282B
peekViewEditor.matchHighlightBackground #363a3d
peekViewEditor.matchHighlightBorder #0000
peekViewEditorGutter.background #24282B
peekViewResult.background #1f2326
peekViewResult.fileForeground #c2c7ca
peekViewResult.lineForeground #a4a9ac
peekViewResult.matchHighlightBackground #363a3d
peekViewResult.selectionBackground #24282B
peekViewResult.selectionForeground #c2c7ca
peekViewTitle.background #1f2326
peekViewTitleDescription.foreground #565a5d
peekViewTitleLabel.foreground #c2c7ca
pickerGroup.border #363a3d
pickerGroup.foreground #a4a9ac
ports.iconRunningProcessForeground #0000
problemsErrorIcon.foreground #A04B52
problemsInfoIcon.foreground #98A1A9
problemsWarningIcon.foreground #e6cb92
progressBar.background #a04b52
quickInput.background #1f2326
quickInput.foreground #a4a9ac
quickInputList.focusBackground #24282B
quickInputList.focusForeground #c2c7ca
quickInputList.focusIconForeground #c2c7ca
quickInputTitle.background #24282B
sash.hoverBorder #0D8BF2
scm.providerBorder #363a3d
scrollbar.shadow #0000
scrollbarSlider.activeBackground #c2c7ca60
scrollbarSlider.background #c2c7ca40
scrollbarSlider.hoverBackground #c2c7ca50
searchEditor.findMatchBackground #c2c7ca10
selection.background #c2c7ca10
settings.checkboxBackground #a4a9ac20
settings.checkboxBorder #a4a9ac40
settings.checkboxForeground #c2c7ca
settings.dropdownBackground #1f2326
settings.dropdownBorder #0000
settings.dropdownForeground #c2c7ca
settings.dropdownListBorder #0000
settings.focusedRowBackground #24282B
settings.focusedRowBorder #363a3d
settings.headerForeground #c2c7ca
settings.modifiedItemIndicator #98a1a9
settings.numberInputBackground #1f2326
settings.numberInputBorder #363a3d
settings.numberInputForeground #a4a9ac
settings.rowHoverBackground #0000
settings.textInputBackground #1f2326
settings.textInputBorder #0000
settings.textInputForeground #a4a9ac
sideBar.background #1f2326
sideBar.border #363a3d
sideBar.dropBackground #44484b40
sideBar.foreground #a4a9ac
sideBarSectionHeader.background #1f2326
sideBarSectionHeader.border #363a3d
sideBarSectionHeader.foreground #a4a9ac
sideBarTitle.foreground #a4a9ac
statusBar.background #1f2326
statusBar.border #363a3d
statusBar.debuggingBackground #2c3033
statusBar.debuggingBorder #2c3033
statusBar.debuggingForeground #a4a9ac
statusBar.foreground #a4a9ac
statusBar.noFolderBackground #1f2326
statusBar.noFolderBorder #0000
statusBar.noFolderForeground #a4a9ac
statusBarItem.activeBackground #363a3d
statusBarItem.errorBackground #A04B52
statusBarItem.errorForeground #A04B52
statusBarItem.hoverBackground #2c3033
statusBarItem.prominentBackground #1f2326
statusBarItem.prominentForeground #c2c7ca
statusBarItem.prominentHoverBackground #2c3033
statusBarItem.remoteBackground #0000
statusBarItem.remoteForeground #c2c7ca
statusBarItem.warningBackground #e6cb92
statusBarItem.warningForeground #c2c7ca
symbolIcon.arrayForeground #a4a9ac
symbolIcon.booleanForeground #a4a9ac
symbolIcon.classForeground #D08770
symbolIcon.colorForeground #a4a9ac
symbolIcon.constantForeground #a4a9ac
symbolIcon.constructorForeground #AA9AA8
symbolIcon.enumeratorForeground #D08770
symbolIcon.enumeratorMemberForeground #98A1A9
symbolIcon.eventForeground #D08770
symbolIcon.fieldForeground #98A1A9
symbolIcon.fileForeground #a4a9ac
symbolIcon.folderForeground #a4a9ac
symbolIcon.functionForeground #AA9AA8
symbolIcon.interfaceForeground #98A1A9
symbolIcon.keyForeground #a4a9ac
symbolIcon.keywordForeground #a4a9ac
symbolIcon.methodForeground #AA9AA8
symbolIcon.moduleForeground #a4a9ac
symbolIcon.namespaceForeground #a4a9ac
symbolIcon.nullForeground #a4a9ac
symbolIcon.numberForeground #a4a9ac
symbolIcon.objectForeground #a4a9ac
symbolIcon.operatorForeground #a4a9ac
symbolIcon.packageForeground #a4a9ac
symbolIcon.propertyForeground #a4a9ac
symbolIcon.referenceForeground #a4a9ac
symbolIcon.snippetForeground #a4a9ac
symbolIcon.stringForeground #a4a9ac
symbolIcon.structForeground #a4a9ac
symbolIcon.textForeground #a4a9ac
symbolIcon.typeParameterForeground #a4a9ac
symbolIcon.unitForeground #a4a9ac
symbolIcon.variableForeground #98A1A9
tab.activeBackground #24282B
tab.activeBorder #24282B
tab.activeBorderTop #b26c72
tab.activeForeground #c2c7ca
tab.activeModifiedBorder #98a1a9
tab.border #363a3d
tab.hoverBackground #24282B
tab.hoverBorder #0000
tab.hoverForeground #a4a9ac
tab.inactiveBackground #1f2326
tab.inactiveForeground #a4a9ac
tab.inactiveModifiedBorder #b26c72
tab.lastPinnedBorder #0000
tab.unfocusedActiveBackground #1f2326
tab.unfocusedActiveBorder #24282B
tab.unfocusedActiveBorderTop #0000
tab.unfocusedActiveForeground #a4a9ac
tab.unfocusedActiveModifiedBorder #a04b52
tab.unfocusedHoverBackground #24282B
tab.unfocusedHoverBorder #0000
tab.unfocusedHoverForeground #a4a9ac
tab.unfocusedInactiveBackground #1f2326
tab.unfocusedInactiveForeground #a4a9ac
tab.unfocusedInactiveModifiedBorder #a04b5266
terminal.ansiBlack #24282B
terminal.ansiBlue #98A1A9
terminal.ansiBrightBlue #98A1A9
terminal.ansiBrightCyan #98A1A9
terminal.ansiBrightGreen #A3B694
terminal.ansiBrightMagenta #AA9AA8
terminal.ansiBrightRed #B26C72
terminal.ansiBrightWhite #c2c7ca
terminal.ansiBrightYellow #E6CB92
terminal.ansiCyan #98A1A9
terminal.ansiGreen #A3B694
terminal.ansiMagenta #AA9AA8
terminal.ansiRed #B26C72
terminal.ansiWhite #a4a9ac
terminal.ansiYellow #D08770
terminal.background #24282B
terminal.border #363a3d
terminal.dropBackground #44484b40
terminal.foreground #a4a9ac
terminal.selectionBackground #c2c7ca10
terminal.tab.activeBorder #363a3d
terminalCursor.background #c2c7ca
terminalCursor.foreground #a04b52
testing.iconErrored #A04B52
testing.iconFailed #B26C72
testing.iconPassed #A3B694
testing.iconQueued #E6CB92
testing.iconSkipped #a4a9ac
testing.iconUnset #a4a9ac
testing.message.error.decorationForeground #A04B52
testing.message.error.lineBackground #A04B52
testing.message.hint.decorationForeground #a4a9ac
testing.message.hint.lineBackground #787E8C
testing.message.info.decorationForeground #98A1A9
testing.message.info.lineBackground #2E7CBC
testing.message.warning.decorationForeground #e6cb92
testing.message.warning.lineBackground #e6cb92
testing.peekBorder #B26C72
testing.runAction #A3B694
textBlockQuote.background #c2c7ca
textBlockQuote.border #363a3d
textCodeBlock.background #24282B
textLink.activeForeground #98A1A9
textLink.foreground #98A1A9b6
textPreformat.foreground #E6CB92
textSeparator.foreground #c2c7ca60
titleBar.activeBackground #1f2326
titleBar.activeForeground #a4a9ac
titleBar.border #363a3d
titleBar.inactiveBackground #1f2326
titleBar.inactiveForeground #a4a9ac
toolbar.activeBackground #24282B
toolbar.hoverBackground #2c3033
tree.indentGuidesStroke #c2c7ca50
tree.tableColumnsBorder #c2c7ca50
walkThrough.embeddedEditorBackground #24282B
welcomePage.background #24282B
welcomePage.buttonBackground #a04b52
welcomePage.buttonHoverBackground #AD5259
welcomePage.progress.background #1f2326
welcomePage.progress.foreground #a04b52
welcomePage.tileBackground #1f2326
welcomePage.tileHoverBackground #1f2326
welcomePage.tileShadow. #0000
widget.shadow #0003
window.activeBorder #363a3d
window.inactiveBorder #363a3d #98A1A9
constant.numeric, constant.other.color.rgb-value, entity.other.attribute-name.class, constant.language.boolean, constant.language.json.comments, entity.other.attribute-name #D08770
variable.language.this #E6CB92
string.quoted, punctuation.definition.string, string.template, meta.attribute-selector #A3B694
meta.object-literal.key, support.type.property-name.json, support.variable.property, keyword.other.unit, variable.other.object, support.constant.property-value, meta.definition.variable, variable, constant.language.import-export-all, entity.name.tag #B26C72
meta.brace, punctuation.section.function.scss, punctuation.separator #a4a9ac
variable.other.object.property, support.type.property-name, punctuation.section.embedded, source, punctuation.definition.attribute-selector, punctuation.definition.tag #c2c7ca
comment.block.documentation, punctuation.definition.comment, comment.line, comment.block, meta.path #565a5d italic
storage.type.function.arrow —
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 } !` ;
}
Dark Pines | Coding Theme