Function UserProfile

  • UserProfile(props: UserProfileProps): Element

  • Displays a user's profile information including their avatar, name, bio, and social stats

    Features:

    • Avatar display with optional winner crown
    • User name and login display
    • Bio with line clamping
    • Social statistics
    • Score display with tooltip
    • Dark mode support
    • Responsive layout

    Visual Elements:

    • User avatar with border
    • Name and username
    • Truncated bio
    • Score badge with tooltip
    • Social stats display

    States:

    • Normal display
    • Winner state with crown
    • Comparison mode with score
    • Loading placeholders

    Score Display:

    • Color-coded based on comparison result
    • Tooltip with explanation
    • Percentile formatting
    • Conditional rendering

    Parameters

    • props: UserProfileProps

      Component properties

      Props for the UserProfile component

      UserProfileProps

      • score: undefined | number

        User's percentile score

      • user: User

        The GitHub user data

    Returns Element

    The rendered user profile

    Example

    <UserProfile
      user={userData}
      isWinner={true}
      score={98.5}
      isComparing={true}
      hasCompetitor={true}
    />

Settings

Member Visibility