components/Navbar/GitHubStats.tsx

import styles from "@/styles/GitHubStats.module.css";
import { ComponentProps } from "react";
import { FaCodeFork, FaEye, FaGithub, FaStar } from "react-icons/fa6";

type GitHubStatsProps = ComponentProps<"a"> & {
    url: string;
};

async function getData(repoName: string) {
    const response = await fetch(`https://api.github.com/repos/${repoName}`, {
        next: { revalidate: 3600 },
    });

    if (!response.ok) {
        return {
            error: true,
        };
    }

    const json = await response.json();

    return {
        stars: json.stargazers_count,
        forks: json.forks,
        watchers: json.subscribers_count,
    };
}

export default async function GitHubStats({
    url,
    className,
    ...props
}: GitHubStatsProps) {
    const repoName = url.replace(/^http(s?):\/\/github.com\//gi, "");
    const { error, forks, stars, watchers } = await getData(repoName);

    return (
        <a
            className={`${styles.main} ${className}`}
            href={url}
            target="_blank"
            rel="noreferrer"
            {...props}
        >
            <div className={styles.repo}>
                <FaGithub size={17} />
                <span>{repoName}</span>
            </div>

            {!error && (
                <div className={styles.stats}>
                    <div>
                        <FaStar />
                        <span>{stars}</span>
                    </div>

                    <div>
                        <FaCodeFork />
                        <span>{forks}</span>
                    </div>

                    <div>
                        <FaEye />
                        <span>{watchers}</span>
                    </div>
                </div>
            )}
        </a>
    );
}
1	import styles from "@/styles/GitHubStats.module.css";
2	import { ComponentProps } from "react";
3	import { FaCodeFork, FaEye, FaGithub, FaStar } from "react-icons/fa6";
4
5	type GitHubStatsProps = ComponentProps<"a"> & {
6	url: string;
7	};
8
9	async function getData(repoName: string) {
10	const response = await fetch(`https://api.github.com/repos/${repoName}`, {
11	next: { revalidate: 3600 },
12	});
13
14	if (!response.ok) {
15	return {
16	error: true,
17	};
18	}
19
20	const json = await response.json();
21
22	return {
23	stars: json.stargazers_count,
24	forks: json.forks,
25	watchers: json.subscribers_count,
26	};
27	}
28
29	export default async function GitHubStats({
30	url,
31	className,
32	...props
33	}: GitHubStatsProps) {
34	const repoName = url.replace(/^http(s?):\/\/github.com\//gi, "");
35	const { error, forks, stars, watchers } = await getData(repoName);
36
37	return (
38	<a
39	className={`${styles.main} ${className}`}
40	href={url}
41	target="_blank"
42	rel="noreferrer"
43	{...props}
44	>
45	<div className={styles.repo}>
46	<FaGithub size={17} />
47	<span>{repoName}</span>
48	</div>
49
50	{!error && (
51	<div className={styles.stats}>
52	<div>
53	<FaStar />
54	<span>{stars}</span>
55	</div>
56
57	<div>
58	<FaCodeFork />
59	<span>{forks}</span>
60	</div>
61
62	<div>
63	<FaEye />
64	<span>{watchers}</span>
65	</div>
66	</div>
67	)}
68	</a>
69	);
70	}