Skip to main content
Moonlight reBump | Coding Theme
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.activeBorder #B6BBC4 activityBar.background #0d151f activityBar.border #1b1b1b activityBar.foreground #B6BBC4 activityBarBadge.background #0d151f activityBarBadge.foreground #0e5d81 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment.line.number-sign.ini, comment.line.number-sign.ignore, comment.line.number-sign.shell, comment.line.double-slash.c, comment.line.double-slash.cpp, comment.line.double-slash.cs, comment.block.css, comment.line.double-slash.go, punctuation.definition.comment.html, comment.block.html, comment.line.double-slash.java, comment.line.double-slash.js, comment.line.double-slash.php, comment.line.number-sign.python, comment.line.number-sign.r, comment.line.double-slash.rust, comment.line.double-dash.sql, comment.line.double-slash.swift, comment.line.double-slash.ts, comment.line.number-sign.yaml #b803a9 entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js #FF6188 entity.other.attribute-name.html #78DCE8 italic
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Moonlight reBump — Moonlight
breadcrumb.background
#0d151f
breadcrumb.focusForeground #0e5d81
button.background #0e5d81
button.foreground #0d151f
commandCenter.activeBackground #131d2b
commandCenter.activeBorder #0d151f
commandCenter.background #131d2b
commandCenter.border #131d2b
commandCenter.inactiveBorder #131d2b
debugIcon.breakpointForeground #FF4B91
dropdown.background #0d151f
dropdown.listBackground #0d151f
editor.background #0d151f
editor.findMatchBackground #1a9b0094
editor.findMatchHighlightBackground #009b0050
editor.foreground #B6BBC4
editor.selectionBackground #131d2b
editor.wordHighlightBackground #6969693b
editorBracketHighlight.foreground1 #84A98C
editorBracketHighlight.foreground2 #84A98C
editorBracketHighlight.foreground3 #84A98C
editorBracketHighlight.foreground4 #84A98C
editorBracketHighlight.foreground5 #84A98C
editorBracketHighlight.foreground6 #84A98C
editorBracketHighlight.unexpectedBracket.foreground #FE5D9F
editorBracketMatch.background #2B2C28
editorBracketMatch.border #2B2C28
editorCursor.background #0e5d81
editorCursor.foreground #B6BBC4
editorError.foreground #FE5D9F
editorGroupHeader.tabsBackground #0d151f
editorIndentGuide.activeBackground1 #303030
editorIndentGuide.activeBackground2 #303030
editorIndentGuide.activeBackground3 #303030
editorIndentGuide.activeBackground4 #303030
editorIndentGuide.activeBackground5 #303030
editorIndentGuide.activeBackground6 #303030
editorIndentGuide.background1 #131515
editorIndentGuide.background2 #131515
editorIndentGuide.background3 #131515
editorIndentGuide.background4 #131515
editorIndentGuide.background5 #131515
editorIndentGuide.background6 #131515
editorLineNumber.activeForeground #0e5d81
editorLineNumber.foreground #45474B
editorWarning.foreground #FF9130
editorWidget.background #0d151f
editorWidget.border #1b1b1b
editorWidget.foreground #B6BBC4
extensionButton.foreground #0d151f
extensionButton.prominentBackground #0e5d81
extensionButton.separator #0d151f
extensionIcon.starForeground #FFD166
extensionIcon.verifiedForeground #4CC9F0
focusBorder #0d151f
input.background #131d2b
inputOption.activeBackground #0e5d81
inputOption.activeBorder #1b1b1b
inputOption.hoverBackground #0e5d81
inputValidation.errorForeground #FF4B91
inputValidation.infoForeground #4CC9F0
inputValidation.warningForeground #FF9130
list.activeSelectionBackground #131d2b
list.errorForeground #FF4B91
list.hoverBackground #131d2b
list.inactiveSelectionBackground #131d2b
menu.background #0d151f
menu.border #2B2C28
menu.foreground #eaedf3
menu.selectionBackground #0e5d81
menu.selectionForeground #0d151f
menu.separatorBackground #2B2C28
menubar.selectionBackground #0d151f
menubar.selectionForeground #f5f5f5
minimap.errorHighlight #FF4B91
minimapSlider.hoverBackground #131d2ba0
notificationCenter.border #1b1b1b
notificationCenterHeader.foreground #0e5d81
notificationLink.foreground #4361EE
notifications.background #0d151f
notifications.border #1b1b1b
notificationsErrorIcon.foreground #FF4B91
notificationsInfoIcon.foreground #4CC9F0
notificationsWarningIcon.foreground #FF9130
notificationToast.border #1b1b1b
panel.background #0d151f
panel.border #2B2C28
profileBadge.background #0e5d81
profileBadge.foreground #B6BBC4
quickInput.background #0d151f
quickInputList.focusBackground #0e5d81
quickInputList.focusForeground #0d151f
scrollbarSlider.activeBackground #131d2b
scrollbarSlider.background #131d2b
scrollbarSlider.hoverBackground #131d2b
search.resultsInfoForeground #0e5d81
settings.focusedRowBorder #1b1b1b
sideBar.background #0d151f
sideBar.border #1b1b1b
sideBar.foreground #B6BBC4
sideBarSectionHeader.background #0d151f
sideBarSectionHeader.border #1b1b1b
sideBarSectionHeader.foreground #B6BBC4
statusBar.background #0d151f
statusBar.debuggingBackground #0e5d81
statusBar.debuggingForeground #0d151f
statusBar.foreground #B6BBC4
statusBarItem.errorBackground #0d151f
statusBarItem.errorForeground #FF4B91
statusBarItem.errorHoverForeground #FF4B91
statusBarItem.remoteBackground #0d151f
statusBarItem.remoteForeground #0e5d81
tab.activeForeground #B6BBC4
tab.border #0d151f
tab.inactiveBackground #0d151f
terminalCursor.foreground #0e5d81
titleBar.activeBackground #0d151f
titleBar.activeForeground #B6BBC4
titleBar.border #0d151f
titleBar.inactiveBackground #0d151f
titleBar.inactiveForeground #B6BBC4 constant.character.entity.named.nbsp.html, constant.character.entity.named.emsp.html, constant.character.entity.named.thinsp.html, constant.character.entity.named.ensp.html, constant.character.entity.named.lt.html, constant.character.entity.named.gt.html, constant.character.entity.named.amp.html, constant.character.entity.named.quot.html, constant.character.entity.named.cent.html, constant.character.entity.named.pound.html, constant.character.entity.named.yen.html, constant.character.entity.named.euro.html, constant.character.entity.named.copy.html, constant.character.entity.named.reg.html, constant.character.entity.named.apos.html
string.quoted.double.html, string.quoted.single.html, string.unquoted.html #A9DC76
punctuation.separator.key-value.html #FC9867 —
text.html.derivative #adabab
constant.character.entity.numeric.decimal.html #A9DC76 —
keyword.control.at-rule.import.css #FF6188 —
entity.other.attribute-name.pseudo-class.css, support.function.misc.css, support.function.url.css, entity.other.attribute-name.pseudo-element.css #78DCE8 italic
string.quoted.double.css, string.quoted.single.css #A9DC76 —
variable.argument.css, variable.css #AB9DF2 —
entity.name.tag.css #FF6188 —
support.type.property-name.css #FC9867 —
support.type.property-name.media.css #FF6188 —
meta.at-rule.media.header.css #A9DC76 —
entity.other.attribute-name.class.css #FFCD70 —
entity.other.attribute-name.id.css #AB9DF2 —
support.constant.property-value.css, meta.property-value.css #A9DC76 —
support.constant.font-name.css #A9DC76
punctuation.separator.key-value.css, punctuation.terminator.rule.css, keyword.operator.combinator.css #FF6188
keyword.control.at-rule.media.css, keyword.operator.logical.and.media.css, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.css, keyword.control.at-rule.font-face.css, meta.at-rule.header.css, entity.name.tag.wildcard.css #FF6188 —
support.constant.media.css, variable.parameter.keyframe-list.css, meta.at-rule.header.css #A9DC76 —
entity.other.keyframe-offset.css #78DCE8
string.quoted.double.js, string.template.js, string.quoted.single.js.jsx #FFCD70
keyword.control.import.js, keyword.control.from.js, keyword.control.export.js, keyword.control.default.js, entity.name.type.instance.jsdoc #FF6188 —
keyword.operator.new.js #68A691 —
entity.name.function.js, variable.other.constant.property.js, variable.other.readwrite.alias.js #A9DC76
variable.other.constant.object.js #FC9867 —
variable.parameter.js, constant.language.boolean.false.js.jsx #A9DC76 italic
variable.other.property.js #A9DC76
variable.other.object.property.js #78DCE8
keyword.control.conditional.js #FF6188 —
storage.type.js, keyword.control.trycatch.js, storage.type.function.js #78DCE8 italic
comment.block.documentation.js #0291ce —
variable.other.object.js #FC9867 —
variable.other.constant.js, meta.object-literal.key.js #AB9DF2
keyword.operator.assignment.js, punctuation.terminator.statement.js, keyword.operator.comparison.js, storage.type.function.arrow.js, punctuation.separator.comma.js, punctuation.accessor.js, punctuation.separator.parameter.js, keyword.operator.logical.js, keyword.operator.relational.js #FC9867 italic
storage.modifier.async.js, keyword.control.flow.js #FF6188
entity.other.attribute-name.js #78DCE8
meta.jsx.children.js #3a3a3a bold
constant.numeric.decimal.js #FFCD70 —
support.type.object.module.js #64CCC5 —
constant.language.boolean.true.js, variable.language.this.js #68A691 —
variable.other.readwrite.js #AB9DF2
source.json meta.structure.dictionary.json support.type.property-name.json #FF6188 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FC9867 —
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 #FFCD70 —
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 #AB9DF2 —
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 #78DCE8 —
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 #FFCD70 —
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 #FC9867 —
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 #AB9DF2 —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #78DCE8 —
string.quoted.double.json #A9DC76 —
punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.key-value.json #78DCE8 —
constant.language.json, meta.structure.dictionary.value.json #09BC8A —
variable.key.dotenv, variable.other.env #FF6188 —
property.value.dotenv, constant.numeric.env, source.env #A9DC76 —
keyword.operator.assignment.dotenv, keyword.operator.assignment.env #444444 —
invalid.deprecated.entity.other.attribute-name.html #F2AE72
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown #A9DC76
punctuation.definition.bold.markdown, markup.bold.markdown #FF6188
punctuation.definition.italic.markdown, markup.italic.markdown #FC9867
string.other.link.title.markdown, markup.underline.link.markdown #78DCE8
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.metadata.markdown #272727 —
string.other.link.description.markdown, markup.underline.link.image.markdown #AB9DF2
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown, punctuation.definition.markdown, markup.fenced_code.block.markdown #FF6188
meta.paragraph.markdown, text.html.markdown #3a3a3a bold
punctuation.definition.list.begin.markdown, markup.raw.block.markdown #78DCE8 bold
punctuation.definition.quote.begin.markdown #AB9DF2 —
meta.separator.markdown #28DF99 —
punctuation.definition.comment.shebang.shell, meta.shebang.shell #AB9DF2 —
support.function.builtin.shell #FF6188
string.unquoted.argument.shell, string.quoted.double.shell, string.quoted.single.shell #A9DC76
variable.other.assignment.shell, variable.other.normal.shell, punctuation.definition.variable.shell, meta.arithmetic.shell, variable.other.loop.shell, variable.parameter.positional.shell #FC9867
keyword.control.break.shell, keyword.control.continue.shell #06BEE1 —
keyword.control.shell, entity.name.command.shell, keyword.control.do.shell, keyword.control.then.shell, keyword.control.elif.shell, keyword.control.else.shell #78DCE8
meta.scope.case-pattern.shell #747474 bold
punctuation.terminator.case-clause.shell, keyword.operator.pipe.shell, keyword.operator.assignment.shell, keyword.operator.arithmetic.shell #FF6188
meta.parameter-expansion #F2D388
constant.other.option.dash.shell, constant.other.option, keyword.operator.logical.shell, meta.statement.command.name.shell, meta.statement.shell #49493C bold
entity.name.function.shell #78DCE8 —
storage.type.function.shell #FC9867 italic
keyword.control.import.python #FF6188 —
keyword.operator.assignment.python, keyword.operator.arithmetic.python, keyword.operator.comparison.python #78DCE8
meta.function-call.generic.python #FFCD70 italic
string.quoted.single.python #A9DC76 —
meta.function-call.arguments.python #AB9DF2
support.function.builtin.python #FFCD70
keyword.control.flow.python #78DCE8 —
storage.type.function.python #FFCD70 —
entity.name.function.python #78DCE8
keyword.control.directive.include.c, storage.type.struct.c, keyword.control.c #FF6188 —
string.quoted.other.lt-gt.include.c #A9DC76 —
storage.type.built-in.primitive.c #FC9867 —
entity.name.function.c #78DCE8 —
string.quoted.double.c #A9DC76 —
constant.language.c, constant.numeric.decimal.c #FC9867
meta.function-call.c #AB9DF2 —
keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.increment.c #FF6188
meta.parens.block.c #FC9867 —
keyword.other.definition.ini #FF6188 —
punctuation.separator.key-value.ini #00d2f7 —
keyword.control.directive.include.cpp, meta.using-namespace.cpp, storage.type.built-in.primitive.cpp, keyword.control.return.cpp #FF6188 —
string.quoted.other.lt-gt.include.cpp, constant.numeric.decimal.cpp, keyword.operator.arithmetic.cpp #A9DC76 —
entity.name.function.definition.cpp #78DCE8 —
string.quoted.double.cpp #A9DC76 —
keyword.operator.assignment.cpp, keyword.operator.bitwise.shift.cpp #FF6188 bold
meta.body.function.definition.cpp #FC9867 —
keyword.other.using.cs, keyword.other.class.cs, keyword.other.namespace.cs, storage.modifier.cs, variable.other.object.cs, keyword.other.directive.using.cs #FF6188 —
storage.modifier.virtual.cs, entity.name.type.class.cs #FC9867 —
storage.type.class.cs, storage.modifier.public.cs, keyword.type.void.cs #FF6188 —
entity.name.type.namespace.cs, entity.name.function.cs, keyword.other.new.cs, storage.type.namespace.cs #78DCE8 —
entity.name.type.cs #FC9867 —
keyword.type.cs, entity.name.variable.parameter.cs, keyword.type.string.cs #FC9867 —
string.quoted.double.cs #A9DC76 —
storage.modifier.static.cs, keyword.operator.expression.new.cs #AB9DF2 —
storage.modifier.sealed.cs, storage.modifier.override.cs #FFCD70 —
entity.name.variable.local.cs #E48F45 —
keyword.operator.assignment.cs, punctuation.terminator.statement.cs, punctuation.accessor.cs, punctuation.separator.colon.cs #FF6188
keyword.package.go, keyword.import.go, keyword.type.go, keyword.function.go, variable.other.assignment.go #FF6188 —
entity.name.package.go, support.function.go #78DCE8 —
entity.name.import.go, punctuation.definition.string.begin.go, punctuation.definition.string.end.go #A9DC76 —
entity.name.type.go, keyword.var.go, variable.other.declaration.go #FC9867 —
keyword.struct.go, entity.name.function.go #FFCD70 —
string.quoted.double.go, constant.numeric.decimal.go #A9DC76 —
keyword.operator.assignment.go, punctuation.other.comma.go, punctuation.other.period.go #78DCE8
storage.type.string.go, storage.type.numeric.go #AB9DF2 —
keyword.other.import.java, storage.modifier.java, storage.type.java #FF6188 —
storage.modifier.import.java, entity.name.function.java, storage.type.generic.java, keyword.control.new.java #78DCE8 —
entity.name.type.class.java, storage.type.primitive.java #AB9DF2 —
storage.type.object.array.java, variable.parameter.java, constant.numeric.decimal.java #FC9867 —
variable.other.object.java, variable.other.definition.java, meta.method-call.java #FC9867 —
variable.other.object.property.java #FFCD70 —
string.quoted.double.java #A9DC76 —
keyword.operator.arithmetic.java, keyword.operator.assignment.java, punctuation.separator.period.java, punctuation.terminator.java, punctuation.bracket.angle.java #FFCD70
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, support.function.construct.output.php, storage.type.class.php, storage.modifier.php, variable.language.this.php, support.function.construct.php #FF6188 —
keyword.control.if.php, keyword.control.else.php, keyword.control.while.php, keyword.control.do.php, keyword.control.break.php, keyword.control.continue.php #78DCE8 —
keyword.control.import.include.php, storage.type.function.php, keyword.other.new.php, variable.other.property.php, variable.other.global.safer.php #78DCE8 —
string.quoted.single.php, string.quoted.double.php #A9DC76 —
entity.name.type.class.php, support.class.php, support.function.constructor.php, support.function.magic.php #FC9867 —
variable.other.php, constant.numeric.decimal.php, constant.language.php #AB9DF2 —
entity.name.function.php, support.function.math.php, support.function.array.php, support.function.json.php #FC9867 —
meta.function-call.php #FFCD70 —
constant.other.php, keyword.operator.comparison.php, keyword.operator.arithmetic.php, keyword.operator.assignment.php, keyword.operator.key.php, keyword.operator.class.php #FF6188 —
entity.name.goto-label.php #494949 bold
punctuation.terminator.expression.php, punctuation.terminator.statement.php, keyword.operator.string.php, punctuation.separator.delimiter.php #FC9867
support.function.r #FF6188
string.quoted.double.r #A9DC76
variable.other.r, variable.parameter.r, constant.numeric.integer.decimal.r, constant.numeric.float.decimal.r #FC9867
entity.name.function.r, keyword.control.r #78DCE8
keyword.operator.assignment.r, keyword.other.r, source.r #00A896
string.quoted.double.rust #A9DC76 —
entity.name.function.macro.rust, storage.type.rust, keyword.control.rust, keyword.other.fn.rust #FF6188 —
variable.other.rust #FC9867 —
entity.name.function.rust, storage.modifier.mut.rust #78DCE8 —
constant.numeric.decimal.rust #FC9867 —
keyword.operator.assignment.equal.rust, keyword.operator.comparison.rust, punctuation.semi.rust, punctuation.comma.rust, keyword.operator.assignment.rust #FF6188
keyword.other.DML.sql, keyword.other.alias.sql, keyword.other.sql, keyword.other.DDL.create.II.sql #FF6188 —
entity.name.function.sql, support.function.aggregate.sql #AB9DF2 —
keyword.other.create.sql #78DCE8 italic
storage.modifier.sql #FFCD70 —
storage.type.interface.ts, storage.type.class.ts, storage.type.ts, storage.type.type.ts, storage.type.function.ts, keyword.control.flow.ts, keyword.control.as.ts #FF6188 —
entity.name.type.interface.ts, entity.name.type.class.ts, entity.name.function.ts, variable.language.this.ts, variable.other.constant.ts, entity.name.type.alias.ts, support.variable.property.ts #78DCE8 —
variable.object.property.ts, variable.parameter.ts, entity.name.type.ts, variable.other.property.ts, meta.object-literal.key.ts, variable.other.object.ts #FC9867 —
support.type.primitive.ts, variable.other.readwrite.ts, keyword.operator.new.ts #AB9DF2 —
string.quoted.double.ts, string.template.ts #A9DC76 —
constant.numeric.decimal.ts #FC9867 —
punctuation.terminator.statement.ts, keyword.operator.assignment.ts, keyword.operator.type.annotation.ts, punctuation.separator.comma.ts, punctuation.accessor.ts #FF6188
keyword.other.declaration-specifier.swift, keyword.control.branch.swift, storage.type.function.swift #FF6188 —
support.function.swift #78DCE8 —
string.quoted.double.single-line.swift #A9DC76 —
support.type.swift, support.function.any-method.swift, entity.name.function.swift #AB9DF2 —
keyword.operator.custom.infix.swift, keyword.operator.ternary.swift, punctuation.separator.argument-label.swift, punctuation.section.embedded.begin.swift, meta.parameter-clause.swift #00A896
constant.numeric.integer.decimal.swift #8AC926 —
entity.name.tag.yaml #FF6188 —
string.quoted.double.yaml, string.quoted.single.yaml, string.unquoted.plain.out.yaml #A9DC76 —
constant.language.boolean.yaml, constant.numeric.integer.yaml, constant.numeric.float.yaml #AB9DF2 —
punctuation.definition.block.sequence.item.yaml #78DCE8 —
punctuation.separator.key-value.mapping.yaml #78DCE8
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 }!` ;
}