claude-code/src/components/PrBadge.tsx

import React from 'react'
import { Link, Text } from '@anthropic/ink'
import type { PrReviewState } from '../utils/ghPrStatus.js'

type Props = {
  number: number
  url: string
  reviewState?: PrReviewState
  bold?: boolean
}

export function PrBadge({
  number,
  url,
  reviewState,
  bold,
}: Props): React.ReactNode {
  const statusColor = getPrStatusColor(reviewState)
  const label = (
    <Text color={statusColor} dimColor={!statusColor && !bold} bold={bold}>
      #{number}
    </Text>
  )
  return (
    <Text>
      <Text dimColor={!bold}>PR</Text>{' '}
      <Link url={url} fallback={label}>
        <Text
          color={statusColor}
          dimColor={!statusColor && !bold}
          underline
          bold={bold}
        >
          #{number}
        </Text>
      </Link>
    </Text>
  )
}

function getPrStatusColor(
  state?: PrReviewState,
): 'success' | 'error' | 'warning' | 'merged' | undefined {
  switch (state) {
    case 'approved':
      return 'success'
    case 'changes_requested':
      return 'error'
    case 'pending':
      return 'warning'
    case 'merged':
      return 'merged'
    default:
      return undefined
  }
}