Function UserSocialStats

  • UserSocialStats(props: UserSocialStatsProps): Element

  • Displays a user's social statistics and links including followers, following, location, website, and LinkedIn profile

    Features:

    • Displays follower and following counts with icons
    • Shows location if provided
    • Renders website URL (automatically adds https:// if missing)
    • Links to LinkedIn profile if available in social accounts
    • All external links open in new tabs with security attributes

    Visual Elements:

    • Follower count with people icon
    • Following count with person icon
    • Location with pin icon
    • Website link with external link icon
    • LinkedIn link with briefcase icon

    Layout:

    • Flex container with wrapping
    • Consistent spacing between items
    • Responsive design
    • Icon alignment with text

    Link Handling:

    • External links open in new tabs
    • Security attributes for external links
    • URL sanitization and formatting
    • Conditional link rendering

    Parameters

    • props: UserSocialStatsProps

      Component properties

      Props interface for the UserSocialStats component

      UserSocialStatsProps

      • user: User

        The GitHub user data containing social information

    Returns Element

    The rendered social statistics

    Example

    <UserSocialStats
      user={{
        followers: { totalCount: 100 },
        following: { totalCount: 50 },
        location: "San Francisco",
        websiteUrl: "github.com",
        socialAccounts: {
          nodes: [{ provider: "LINKEDIN", url: "https://linkedin.com/in/user" }]
        }
      }}
    />

Settings

Member Visibility