Skip to content

Build Reputation Display Components and Profile Integration #65

@0xdevcollins

Description

@0xdevcollins

Create the UI components for displaying contributor reputation including badges, cards, progress indicators, and completion history. Integrate these components into user profiles, bounty detail pages, and contributor hover previews.

Dependencies
Blocked by: Issue #64 (Reputation Core Infrastructure & API)

Acceptance Criteria

  • Core Display Components
  • Create TierBadge component with icon, label, and color variants
  • Create ReputationScore component showing total points
  • Create TierProgress component with progress bar to next tier
  • Create ReputationBreakdown chart showing category scores
  • Create StatsGrid component displaying key metrics
  • Create StreakBadge component with fire indicator

Reputation Card Component

  • Full reputation summary card for profiles
  • Display tier, score, and progress
  • Show key stats (completed, earnings, streak)
  • Display top expertise tags
  • Show last active timestamp
  • Responsive design for sidebar placement

Reputation Tooltip/Popover

  • Compact reputation preview on avatar hover
  • Display tier badge and score
  • Show quick stats (completed count, completion rate)
  • Link to full profile
  • Prefetch data on hover with delay

Completion History Component

  • List of past bounty completions
  • Show bounty title, project, difficulty
  • Display reward earned and points gained
  • Show maintainer rating if available
  • Infinite scroll pagination
  • Empty state for new contributors

Profile Page Integration

  • Add reputation section to user profile
  • Display full reputation card
  • Show completion history tab
  • Handle loading and error states

Bounty Page Integration

  • Show claimer's reputation in bounty sidebar
  • Display reputation tooltip on claimer avatar
  • Show "no claimer yet" state for open bounties

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions