react-icons/go#GoRepo JavaScript Examples

TimelineItem = ({ title, description, language, forks, size, stars, url }) => {
    return (
        <>
            <a
                href={url}
                target='_blank'
                rel='noopener noreferrer'>

                <ItemContainer>
                    <h1>
                        <span><GoRepo /></span> {title}
                    </h1>
                    <div>{description}</div>
                    <ItemFooter>
                        <div>
                            <FooterSpan available={language} ><GoPrimitiveDot /> {language}</FooterSpan>
                            <FooterSpan available><GoStar /> {stars}</FooterSpan>
                            <FooterSpan available><GoRepoForked /> {forks}</FooterSpan>
                        </div>
                        <div>{Number(size).toLocaleString()} Kb</div>
                    </ItemFooter>
                </ItemContainer>
            </a>
        </>
    );
}

function seticon(iconName, size) {
	if (iconName === 'FaGuitar') return <FaGuitar color='#fff' size={size} />
	else if (iconName === 'GiBookshelf')
		return <GiBookshelf color='#fff' size={size} />
	else if (iconName === 'GiThorHammer')
		return <GiThorHammer color='#fff' size={size} />
	else if (iconName === 'DiJavascript1')
		return <DiJavascript1 color='#fff' size={size} />
	else if (iconName === 'GoRepo') return <GoRepo color='#fff' size={size} />
	else if (iconName === 'TiSocialAtCircular')
		return <TiSocialAtCircular color='#fff' size={size} />
}

UserInfo = () => {
	const { githubUser } = React.useContext(GithubContext);
	const { public_repos, followers, following, public_gists } = githubUser;

	const items = [
		{
			id: 1,
			icon: <GoRepo className='icon'></GoRepo>,
			label: 'repos',
			value: public_repos,
			color: 'pink',
		},
		{
			id: 2,
			icon: <FiUsers className='icon'></FiUsers>,
			label: 'followers',
			value: followers,
			color: 'green',
		},
		{
			id: 3,
			icon: <FiUserPlus className='icon'></FiUserPlus>,
			label: 'following',
			value: following,
			color: 'purple',
		},
		{
			id: 4,
			icon: <GoGist className='icon'></GoGist>,
			label: 'gists',
			value: public_gists,
			color: 'yellow',
		},
	];

	return (
		<section className='section'>
			<Wrapper className='section-center'>
				{items.map((item) => {
					return <Item key={item.id} {...item}></Item>;
				})}
			</Wrapper>
		</section>
	);
}

Stats = ({ userData, repoData }) => {
    const [starData, setStarData] = useState({});
    const [sizeData, setSizeData] = useState({});
    const [totalStars, setTotalStars] = useState(null);

    useEffect(() => {
        const getMostStarredRepos = () => {
            const LIMIT = 5;
            const sortProperty = "stargazers_count";
            const mostStarredRepos = repoData
                .filter((repo) => !repo.fork)
                .sort((a, b) => b[sortProperty] - a[sortProperty])
                .slice(0, LIMIT);

            // Label and data needed for  displaying Charts
            const label = mostStarredRepos.map((repo) => repo.name);
            const data = mostStarredRepos.map((repo) => repo[sortProperty]);

            setStarData({ label, data });
        };

        const getTotalStars = () => {
            const myRepos = repoData
                .filter((repo) => !repo.fork)
                .map((repo) => repo.stargazers_count);
            const totalStars = myRepos.reduce((a, b) => a + b, 0);

            setTotalStars(totalStars);
        };

        const getMaxSizeRepos = () => {
            const LIMIT = 5;
            const sortProperty = "size";
            const mostStarredRepos = repoData
                .filter((repo) => !repo.fork)
                .sort((a, b) => b[sortProperty] - a[sortProperty])
                .slice(0, LIMIT);

            const label = mostStarredRepos.map((repo) => repo.name);
            const data = mostStarredRepos.map((repo) => repo[sortProperty]);

            setSizeData({ label, data });
        };

        if (repoData.length) {
            getMostStarredRepos();
            getMaxSizeRepos();
            getTotalStars();
        }
    }, [repoData]);

    return (
        <>
            <StatsContainer>
                <StatsDiv primary>
                    <div>
                        <GoRepo />
                        <IconSpan>Repositories</IconSpan>
                    </div>
                    <h2>{userData.public_repos}</h2>
                </StatsDiv>
                <StatsDiv secondary>
                    <div>
                        <GoStar />
                        <IconSpan>Total Stars</IconSpan>
                    </div>
                    <h2>{totalStars}</h2>
                </StatsDiv>
                <StatsDiv tertiary>
                    <div>
                        <GoOrganization />
                        <IconSpan>Followers</IconSpan>
                    </div>
                    <h2>{userData.followers}</h2>
                </StatsDiv>
                <StatsDiv quad>
                    <div>
                        <GoPerson />
                        <IconSpan>Following</IconSpan>
                    </div>
                    <h2>{userData.following}</h2>
                </StatsDiv>
            </StatsContainer>

            <RoundChartContainer>
                <ChartDiv chart1>
                    <ChartHeading>Largest in Size(kb)</ChartHeading>
                    <BarChart sizeData={sizeData} />
                </ChartDiv>
                <ChartDiv>
                    <ChartHeading>Top Languages</ChartHeading>
                    <DoughnutChart />
                </ChartDiv>
                <ChartDiv chart3>
                    <ChartHeading>Most Starred</ChartHeading>
                    <PieChart starData={starData} width={100} />
                </ChartDiv>
            </RoundChartContainer>
        </>
    );
}