Skip to main content
Home Theme VS Code SuperuserKAM-VSCodeTheme This color scheme was created to match the Superuser KAM switches.
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 #252a36 activityBar.background #3a4254 activityBar.foreground #80E0A7 activityBarBadge.background #80E0A7 activityBarBadge.foreground #425563 badge.background #80E0A7 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded #B4B4B4 — punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #FF9287 — variable.other.generic-type.haskell #9C83F8 — storage.type.haskell #F6A728
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
SuperuserKAM-VSCodeTheme — superuserkamtheme
badge.foreground
#425563
button.background #36639B
button.foreground #FFFFFF
button.secondaryBackground #223f62
button.secondaryForeground #c0bdbd
checkbox.border #80E0A7
commandCenter.activeBackground #252a36
commandCenter.activeForeground #80E0A7
commandCenter.background #3a4254
commandCenter.border #80E0A7
commandCenter.foreground #80E0A7
debugExceptionWidget.background #5d272a
debugExceptionWidget.border #eb200c
debugIcon.breakpointCurrentStackframeForeground #F6A728
debugIcon.breakpointForeground #f54635
debugToolBar.background #2f3645
descriptionForeground #c0bdbd
diffEditor.insertedTextBackground #80E0A733
dropdown.background #252a36
dropdown.border #80E0A7
dropdown.foreground #80E0A7
dropdown.listBackground #252a36
editor.background #252a36
editor.findMatchBackground #36639BFF
editor.findMatchHighlightBackground #444d6366
editor.foreground #FFFFFF
editor.lineHighlightBackground #2f3645
editor.selectionBackground #36639BFF
editor.stackFrameHighlightBackground #806130
editor.wordHighlightBackground #444d6366
editorBracketHighlight.foreground1 #F6A728
editorBracketHighlight.foreground2 #9C83F8
editorBracketHighlight.foreground3 #A3E9F1
editorBracketMatch.background #515a6b
editorBracketMatch.border #515a6b
editorCursor.background #ffffffc9
editorCursor.foreground #80E0A7
editorError.foreground #eb200c
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #1b1e27
editorGutter.addedBackground #38B169
editorGutter.deletedBackground #F65C4D
editorGutter.modifiedBackground #F6A728
editorHoverWidget.background #252a36
editorHoverWidget.border #425563
editorHoverWidget.highlightForeground #FFFFFF
editorIndentGuide.activeBackground #80e0a6a8
editorIndentGuide.background #3a4254
editorInlayHint.background #425563
editorInlayHint.foreground #252a36
editorLineNumber.activeForeground #80E0A7
editorLineNumber.foreground #425563
editorMarkerNavigation.background #3a4254
editorOverviewRuler.addedForeground #38B169
editorOverviewRuler.deletedForeground #F65C4D
editorOverviewRuler.findMatchForeground #9C83F8
editorOverviewRuler.modifiedForeground #F6A728
editorSuggestWidget.background #252a36
editorSuggestWidget.border #3a4254
editorSuggestWidget.selectedBackground #3a4254
editorWarning.foreground #eb900c
editorWhitespace.foreground #425563
editorWidget.background #2f3645
focusBorder #425563
foreground #80E0A7
gitDecoration.addedResourceForeground #38B169
gitDecoration.deletedResourceForeground #F65C4D
gitDecoration.ignoredResourceForeground #425563
gitDecoration.modifiedResourceForeground #F6A728
icon.foreground #80E0A7
input.background #252a36
list.activeSelectionBackground #252a36
list.activeSelectionForeground #80E0A7
list.focusBackground #323842
list.focusForeground #f0f0f0
list.highlightForeground #c5c5c5
list.hoverBackground #252a36
list.hoverForeground #fff
list.inactiveSelectionBackground #252a36
list.inactiveSelectionForeground #80E0A7
list.warningForeground #eb900c
menu.background #252a36
menu.border #3a4254
menu.foreground #abb2bf
menu.selectionBackground #3a4254
menu.separatorBackground #343a45
menubar.selectionBackground #232e35
menubar.selectionForeground #80E0A7
minimap.errorHighlight #eb200c
minimap.findMatchHighlight #9C83F8
minimap.warningHighlight #eb900c
minimapGutter.addedBackground #38B169
minimapGutter.deletedBackground #F65C4D
minimapGutter.modifiedBackground #F6A728
minimapSlider.activeBackground #a8b0be60
minimapSlider.background #a8b0be60
minimapSlider.hoverBackground #a8b0be60
panel.border #3e4452
panelSectionHeader.background #21252b
peekViewEditor.background #3a4254
peekViewEditor.matchHighlightBackground #425563
peekViewResult.background #2f3645
scmGraph.historyItemHoverDefaultLabelBackground #425563
scmGraph.historyItemHoverDefaultLabelForeground #80E0A7
scrollbar.shadow #23252c
scrollbarSlider.activeBackground #747d9180
scrollbarSlider.background #4e566660
scrollbarSlider.hoverBackground #5a637580
selection.background #36639B
settings.checkboxBackground #252a36
settings.checkboxBorder #80E0A7
settings.checkboxForeground #80E0A7
settings.dropdownBackground #252a36
settings.dropdownBorder #80E0A7
settings.dropdownForeground #80E0A7
settings.dropdownListBorder #80E0A7
settings.focusedRowBackground #425563
settings.headerForeground #fff
settings.numberInputBackground #252a36
settings.numberInputBorder #80E0A7
settings.numberInputForeground #80E0A7
settings.textInputBackground #252a36
settings.textInputBorder #80E0A7
settings.textInputForeground #80E0A7
sideBar.background #2f3645
sideBar.foreground #B4B4B4
sideBarSectionHeader.background #425563
sideBarSectionHeader.foreground #80E0A7
sideBarTitle.foreground #bbbbbb
statusBar.background #80E0A7
statusBar.debuggingBackground #F6A728
statusBar.debuggingForeground #252a36
statusBar.foreground #252a36
statusBar.noFolderBackground #425563
statusBarItem.prominentBackground #f54635
statusBarItem.remoteBackground #36639B
statusBarItem.remoteForeground #f8fdfa
tab.activeBackground #252a36
tab.activeForeground #dcdcdc
tab.border #181a1f
tab.hoverBackground #2f3645
tab.inactiveBackground #1b1e27
tab.unfocusedHoverBackground #2f3645
terminal.ansiBlack #000000
terminal.ansiBlue #36639B
terminal.ansiBrightBlack #425563
terminal.ansiBrightBlue #66C7F9
terminal.ansiBrightCyan #A3E9F1
terminal.ansiBrightGreen #AEF158
terminal.ansiBrightMagenta #9C83F8
terminal.ansiBrightRed #FF9287
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFDE31
terminal.ansiCyan #3B968C
terminal.ansiGreen #38B169
terminal.ansiMagenta #D3427D
terminal.ansiRed #F65C4D
terminal.ansiWhite #B4B4B4
terminal.ansiYellow #F6A728
terminal.background #252a36
terminal.foreground #80E0A7
textBlockQuote.background #1b1e27
textBlockQuote.border #80E0A7
textLink.foreground #66C7F9
textPreformat.foreground #F6A728
titleBar.activeBackground #3a4254
titleBar.activeForeground #80E0A7
titleBar.inactiveBackground #3a4254
titleBar.inactiveForeground #9da5b4
walkThrough.embeddedEditorBackground #2e3440 support.variable.magic.python #FF9287 —
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #B4B4B4 —
variable.parameter.function.language.special.self.python #FFDE31 —
variable.parameter.function.language.special.cls.python #FFDE31 —
storage.modifier.lifetime.rust #B4B4B4 —
support.function.std.rust #80E0A7 —
entity.name.lifetime.rust #FFDE31 —
variable.language.rust #FF9287 —
support.constant.edge #9C83F8 —
constant.other.character-class.regexp #FF9287 —
keyword.operator.word #9C83F8 —
keyword.operator.quantifier.regexp #F6A728 —
variable.parameter.function #B4B4B4 —
comment markup.link #425563 —
markup.changed.diff #FFDE31 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #80E0A7 —
markup.inserted.diff #38B169 —
markup.deleted.diff #FF9287 —
meta.function.c,meta.function.cpp #FF9287 —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #B4B4B4 —
punctuation.separator.key-value #B4B4B4 —
keyword.operator.expression.import #80E0A7 —
support.constant.math #FFDE31 —
support.constant.property.math #F6A728 —
variable.other.constant #FFDE31 —
storage.type.annotation.java, storage.type.object.array.java #FFDE31 —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #B4B4B4 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #FFDE31 —
keyword.operator.instanceof.java #9C83F8 —
meta.definition.variable.name.java #FF9287 —
keyword.operator.logical #66C7F9 —
keyword.operator.bitwise #66C7F9 —
keyword.operator.channel #66C7F9 —
support.constant.property-value.scss,support.constant.property-value.css #F6A728 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #66C7F9 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #F6A728 —
punctuation.separator.list.comma.css #B4B4B4 —
support.constant.color.w3c-standard-color-name.css #F6A728 —
support.type.vendored.property-name.css #66C7F9 —
support.module.node,support.type.object.module,support.module.node #FFDE31 —
entity.name.type.module #FFDE31 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #FF9287 —
support.constant.json #F6A728 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #9C83F8 —
support.type.object.console #FF9287 —
support.variable.property.process #F6A728 —
entity.name.function,support.function.console #80E0A7 —
keyword.operator.misc.rust #B4B4B4 —
keyword.operator.sigil.rust #9C83F8 —
keyword.operator.delete #9C83F8 —
support.type.object.dom #66C7F9 —
support.variable.dom,support.variable.property.dom #FF9287 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #66C7F9 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #9C83F8 —
punctuation.separator.delimiter #B4B4B4 —
punctuation.separator.c,punctuation.separator.cpp #9C83F8 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #66C7F9 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #9C83F8 —
variable.parameter.function.language.python #F6A728 —
support.type.python #66C7F9 —
keyword.operator.logical.python #9C83F8 —
variable.parameter.function.python #F6A728 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #B4B4B4 —
meta.function-call.generic.python #80E0A7 —
constant.character.format.placeholder.other.python #F6A728 —
keyword.operator.assignment.compound #9C83F8 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #66C7F9 —
entity.name.namespace #FFDE31 —
variable.language #FFDE31 —
token.variable.parameter.java #B4B4B4 —
import.storage.java #FFDE31 —
token.package.keyword #9C83F8 —
entity.name.function, meta.require, support.function.any-method, variable.function #80E0A7 —
entity.name.type.namespace #FFDE31 —
support.class, entity.name.type.class #FFDE31 —
entity.name.class.identifier.namespace.type #FFDE31 —
entity.name.class, variable.other.class.js, variable.other.class.ts #FFDE31 —
variable.other.class.php #FF9287 —
control.elements, keyword.operator.less #F6A728 —
keyword.other.special-method #80E0A7 —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #9C83F8 —
token.storage.type.java #FFDE31 —
support.type.property-name #B4B4B4 —
support.constant.property-value #B4B4B4 —
support.constant.font-name #F6A728 —
constant.other.symbol #66C7F9 —
punctuation.definition.constant #F6A728 —
entity.other.attribute-name #F6A728 —
entity.other.attribute-name.id #80E0A7 —
entity.other.attribute-name.class.css #F6A728 —
markup.heading punctuation.definition.heading, entity.name.section #80E0A7 —
keyword.other.unit #FF9287 —
markup.bold,todo.bold #F6A728 —
punctuation.definition.bold #FFDE31 —
markup.italic, punctuation.definition.italic,todo.emphasis #9C83F8 —
entity.name.section.markdown #FF9287 —
punctuation.definition.heading.markdown #FF9287 —
punctuation.definition.list.begin.markdown #FFDE31 —
markup.heading.setext #B4B4B4 —
punctuation.definition.bold.markdown #F6A728 —
markup.inline.raw.markdown #38B169 —
markup.inline.raw.string.markdown #38B169 —
punctuation.definition.raw.markdown #FFDE31 —
punctuation.definition.list.markdown #FFDE31 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #FF9287 —
beginning.punctuation.definition.list.markdown #FF9287 —
punctuation.definition.metadata.markdown #FF9287 —
markup.underline.link.markdown,markup.underline.link.image.markdown #9C83F8 —
string.other.link.title.markdown,string.other.link.description.markdown #80E0A7 —
markup.raw.monospace.asciidoc #38B169 —
punctuation.definition.asciidoc #FFDE31 —
markup.list.asciidoc #FFDE31 —
markup.link.asciidoc,markup.other.url.asciidoc #9C83F8 —
string.unquoted.asciidoc,markup.other.url.asciidoc #36639B —
punctuation.section.embedded, variable.interpolation #FF9287 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #9C83F8 —
invalid.illegal.bad-ampersand.html #B4B4B4 —
invalid.deprecated #FFFFFF —
invalid.unimplemented #FFFFFF —
source.json meta.structure.dictionary.json > string.quoted.json #FF9287 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #FF9287 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #38B169 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #66C7F9 —
support.type.property-name.json #FF9287 —
support.type.property-name.json punctuation #FF9287 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #9C83F8 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #9C83F8 —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #FFDE31 —
keyword.operator.error-control.php #9C83F8 —
keyword.operator.type.php #9C83F8 —
punctuation.section.array.begin.php #B4B4B4 —
punctuation.section.array.end.php #B4B4B4 —
invalid.illegal.non-null-typehinted.php #F65C4D —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #FFDE31 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #80E0A7 —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #B4B4B4 —
support.constant.core.rust #F6A728 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #F6A728 —
entity.name.goto-label.php,support.other.php #36639B —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #66C7F9 —
keyword.operator.regexp.php #9C83F8 —
keyword.operator.comparison.php #66C7F9 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #9C83F8 —
meta.function.decorator.python #80E0A7 —
support.token.decorator.python,meta.function.decorator.identifier.python #66C7F9 —
function.parameter #B4B4B4 —
function.parameter.ruby, function.parameter.cs #B4B4B4 —
constant.language.symbol.ruby #66C7F9 —
inline-color-decoration rgb-value #F6A728 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #FFDE31 —
block.scope.end,block.scope.begin #B4B4B4 —
entity.name.variable.local.cs #FF9287 —
token.error-token #F65C4D —
token.debug-token #9C83F8 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #9C83F8 —
meta.template.expression #B4B4B4 —
keyword.operator.module #9C83F8 —
support.type.type.flowtype #80E0A7 —
support.type.primitive #FFDE31 —
meta.property.object #FF9287 —
variable.parameter.function.js #FF9287 —
keyword.other.template.begin #38B169 —
keyword.other.template.end #38B169 —
keyword.other.substitution.begin #38B169 —
keyword.other.substitution.end #38B169 —
keyword.operator.assignment #66C7F9 —
keyword.operator.assignment.go #FFDE31 —
keyword.operator.arithmetic.go, keyword.operator.address.go #9C83F8 —
entity.name.package.go #FFDE31 —
support.type.prelude.elm #66C7F9 —
support.constant.elm #F6A728 —
punctuation.quasi.element #9C83F8 —
constant.character.entity #FF9287 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #66C7F9 —
entity.global.clojure #FFDE31 —
meta.symbol.clojure #FF9287 —
constant.keyword.clojure #66C7F9 —
meta.arguments.coffee, variable.parameter.function.coffee #FF9287 —
meta.scope.prerequisites.makefile #FF9287 —
storage.modifier.import.groovy #FFDE31 —
meta.method.groovy #80E0A7 —
meta.definition.variable.name.groovy #FF9287 —
meta.definition.class.inherited.classes.groovy #38B169 —
support.variable.semantic.hlsl #FFDE31 —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #9C83F8 —
text.variable, text.bracketed #FF9287 —
support.type.swift, support.type.vb.asp #FFDE31 —
entity.name.function.xi #FFDE31 —
entity.name.class.xi #66C7F9 —
constant.character.character-class.regexp.xi #FF9287 —
constant.regexp.xi #9C83F8 —
keyword.control.xi #66C7F9 —
beginning.punctuation.definition.quote.markdown.xi #38B169 —
beginning.punctuation.definition.list.markdown.xi #d780e0 —
constant.character.xi #36639B —
constant.other.color.rgb-value.xi #FFFFFF —
punctuation.definition.tag.xi #425563 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #FFDE31 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #FF9287 —
meta.brace.square #B4B4B4 —
comment, punctuation.definition.comment #d780e0 italic
markup.quote.markdown #425563 —
punctuation.definition.block.sequence.item.yaml #B4B4B4 —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #66C7F9 —
entity.name.variable.parameter.cs #FFDE31 —
entity.name.variable.field.cs #FF9287 —
markup.underline — underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #BE5046 —
support.other.namespace.php #B4B4B4 —
variable.other.object #FFDE31 —
variable.other.constant.property #FF9287 —
entity.other.inherited-class #FFDE31 —
variable.other.readwrite.c #FF9287 —
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php #B4B4B4 —
constant.numeric.decimal.asm.x86_64 #9C83F8 —
support.other.parenthesis.regexp #F6A728 —
constant.character.escape #66C7F9 —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
markup.italic.markdown — italic
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*
SuperuserKAM-VSCodeTheme | Coding Theme 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 } !` ;
}