Docs
Forge
AttentionCard

AttentionCard

A feed card with a type icon column, used for items that need user attention. Supports diff stats.

Import

import { AttentionCard } from "@gumtree/ui/forge/AttentionCard";

Props

Prop	Type	Default	Description
`typeIcon`	`ComponentChildren`	-	Icon indicating the type of attention item
`avatarPlaceholder`	`string`	-	Initial letter for the avatar
`avatarSrc`	`string`	-	URL for the avatar image
`avatarColor`	`string`	-	Background color for the avatar placeholder
`headline`*	`ComponentChildren`	-	Primary content with links and badges
`detail`	`ComponentChildren`	-	Secondary description
`diff`	`{ added: number; removed: number; files: number }`	-	Diff statistics to display
`time`	`string`	-	Relative timestamp

Examples

With Diff Stats

A review request showing file changes.

⑂

example-app — Review requested on PR #131 review

Fix locale fallback for multibyte sequences
alice requested your review · CI passing

+87 −12 across 4 files

<AttentionCard
  typeIcon={<span style="color:#f0b400">⑂</span>}
  avatarPlaceholder="A"
  headline={<><a>example-app</a> — Review requested on PR <a>#131</a> <FeedBadge status="review" /></>}
  detail={<>Fix locale fallback for multibyte sequences<br /><strong>alice</strong> requested your review · CI passing</>}
  diff={{ added: 87, removed: 12, files: 4 }}
  time="2h"
/>

CI Failure

A CI failure attention card without diff stats.

⚠

necessary-os — CI failing on main fail

musl-cross build: linker error in libunwind · 3 consecutive failures

<AttentionCard
  typeIcon={<span style="color:#cf222e">⚠</span>}
  avatarPlaceholder="CI"
  headline={<><a>necessary-os</a> — CI failing on <strong>main</strong> <FeedBadge status="fail" /></>}
  detail={<>musl-cross build: linker error in <strong>libunwind</strong> · 3 consecutive failures</>}
  time="4h"
/>