Pull Request Card

A pull request at a glance — state, branches, checks, reviewers. State is shown as an icon and a word, never colour alone.

src/components/ui/pull-request-card.tsx

About

From the component's own source, where it was written.

A pull request at a glance.

The state is an icon *and* a word, never colour alone — merged and closed are purple and red in every forge, which is exactly the pair that disappears for the most common form of colour blindness.

Install

npx astralyx-ui add pull-request-card

Usage

import { PullRequestCard } from '@/components/ui/pull-request-card'

<PullRequestCard number={412} title="Add squircle corners" state="open" />

Composer

Change the props and the source below follows.

Derive field padding from control height

#412 · Open · by Ada Lovelace · updated last month

Open

fix/input-paddingmain

bugenhancement

+128−416

Props

state

labels

tsx

<PullRequestCard
  number={412}
  title="Derive field padding from control height"
  state="open"
  branch="fix/input-padding"
  additions={128}
  deletions={41}
  reviewers={['Grace Hopper', 'Alan Turing']}
/>

Examples

States

tsx

<PullRequestCard number={412} title="…" state="open" />
<PullRequestCard number={408} title="…" state="merged" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`PullRequestCard`

A pull request at a glance.

Extends Omit<ComponentProps<'article'>, 'title'>.

Prop	Type	Default	Description
number	number	required	open, draft, merged or closed.
title	ReactNode	required	open, draft, merged or closed.
state	PullRequestState	'open'	open, draft, merged or closed.
author	string	—	—
branch	string	baseBranch: 'main'	Rendered as a source → target pair.
baseBranch	string	'main'	Rendered as a source → target pair.
updated	Date	—	Shown as a relative time through Fmt.
comments	number	—	—
additions	number	—	Passed through to DiffStat.
deletions	number	—	Passed through to DiffStat.
reviewers	string[]	—	Names, rendered as a stacked AvatarGroup.
labels	ReactNode	—	—
checks	ReactNode	—	Slot for a StatusChecks summary or any other node.
reviewersLabel	ReactNode	'Reviewers'	—

Types

Type	Definition	Description
`PullRequestState`	'open' \| 'draft' \| 'merged' \| 'closed'	—