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	rakinar2	575	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			}