RESTfulMC/Frontend/src/app/components/github-star-button.tsx

59 lines
1.6 KiB
TypeScript
Raw Normal View History

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;