59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
|
import MinecraftButton from "@/components/minecraft-button";
|
||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
import { StarIcon } from "@heroicons/react/24/outline";
|
||
|
import Link from "next/link";
|
||
|
import { Suspense } from "react";
|
||
|
|
||
|
const GitHubStarButton = async (): Promise<JSX.Element> => {
|
||
|
return (
|
||
|
<Link
|
||
|
href="https://github.com/Rainnny7/RESTfulMC"
|
||
|
rel="noopener noreferrer"
|
||
|
target="_blank"
|
||
|
>
|
||
|
<MinecraftButton className="flex gap-1.5 items-center group/star">
|
||
|
{/* Star Count */}
|
||
|
<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
|
||
|
<GitHubStarCount />
|
||
|
</Suspense>
|
||
|
|
||
|
<StarIcon
|
||
|
className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
|
||
|
width={22}
|
||
|
height={22}
|
||
|
/>
|
||
|
<span>Star on GitHub</span>
|
||
|
</MinecraftButton>
|
||
|
</Link>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* The github star count component.
|
||
|
*
|
||
|
* @returns the star count jsx
|
||
|
*/
|
||
|
const GitHubStarCount = async (): Promise<JSX.Element> => {
|
||
|
const stars: number = await getStarCount(); // Get the repo star count
|
||
|
return (
|
||
|
<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Get the amount of stars
|
||
|
* the repository has.
|
||
|
*
|
||
|
* @returns the star count
|
||
|
*/
|
||
|
const getStarCount = async (): Promise<number> => {
|
||
|
const response: Response = await fetch(
|
||
|
"https://api.github.com/repos/Rainnny7/RESTfulMC",
|
||
|
{ next: { revalidate: 300 } } // Revalidate every 5 minutes
|
||
|
);
|
||
|
const json: any = await response.json(); // Get the JSON response
|
||
|
return json.stargazers_count; // Return the stars
|
||
|
};
|
||
|
|
||
|
export default GitHubStarButton;
|