2024-04-18 13:44:25 -07:00
|
|
|
"use client";
|
|
|
|
|
2024-04-17 15:04:32 -07:00
|
|
|
import MinecraftButton from "@/components/minecraft-button";
|
|
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
import { StarIcon } from "@heroicons/react/24/outline";
|
|
|
|
import Link from "next/link";
|
2024-04-20 12:20:32 -07:00
|
|
|
import {
|
|
|
|
Dispatch,
|
|
|
|
ReactElement,
|
|
|
|
SetStateAction,
|
|
|
|
Suspense,
|
|
|
|
useEffect,
|
|
|
|
useState,
|
|
|
|
} from "react";
|
2024-04-17 15:04:32 -07:00
|
|
|
|
2024-04-17 16:14:10 -07:00
|
|
|
/**
|
|
|
|
* The button to display the amount
|
|
|
|
* of stars the GitHub repository has.
|
|
|
|
*
|
|
|
|
* @returns the component jsx
|
|
|
|
*/
|
2024-04-18 13:44:25 -07:00
|
|
|
const GitHubStarButton = (): ReactElement => {
|
|
|
|
const [stars, setStars]: [
|
|
|
|
number | undefined,
|
2024-04-19 07:54:56 -07:00
|
|
|
Dispatch<SetStateAction<number | undefined>>,
|
2024-04-18 13:44:25 -07:00
|
|
|
] = useState<number | undefined>(undefined); // The stars of the repository
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const fetchStars = async (): Promise<void> => {
|
|
|
|
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
|
|
|
|
setStars(json.stargazers_count); // Set the stars
|
|
|
|
};
|
|
|
|
if (stars === undefined) {
|
|
|
|
fetchStars(); // Fetch the stars
|
|
|
|
}
|
|
|
|
}, [stars]);
|
|
|
|
|
2024-04-17 16:04:15 -07:00
|
|
|
return (
|
|
|
|
<Link
|
|
|
|
href="https://github.com/Rainnny7/RESTfulMC"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
target="_blank"
|
|
|
|
>
|
2024-04-21 09:33:30 -07:00
|
|
|
<MinecraftButton className="px-3 xs:px-5 flex gap-1.5 items-center group/star">
|
2024-04-17 16:04:15 -07:00
|
|
|
{/* Star Count */}
|
|
|
|
<Suspense
|
|
|
|
fallback={<Skeleton className="w-4 h-5 rounded-md" />}
|
|
|
|
>
|
2024-04-18 13:44:25 -07:00
|
|
|
<code className="px-1 rounded-md bg-minecraft-green-3/80">
|
|
|
|
{stars || 0}
|
|
|
|
</code>
|
2024-04-17 16:04:15 -07:00
|
|
|
</Suspense>
|
2024-04-17 15:04:32 -07:00
|
|
|
|
2024-04-17 16:04:15 -07:00
|
|
|
<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>
|
|
|
|
);
|
2024-04-17 15:04:32 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
export default GitHubStarButton;
|