From 6a9ec1fe9f247ded4a8d8ae12f65b077c9ced32f Mon Sep 17 00:00:00 2001 From: Rainnny7 Date: Wed, 17 Apr 2024 18:04:32 -0400 Subject: [PATCH] Show GitHub star button on smaller devices --- .../src/app/components/github-star-button.tsx | 58 +++++++++++++++++++ .../src/app/components/github-star-count.tsx | 28 --------- Frontend/src/app/components/landing/hero.tsx | 8 ++- .../src/app/components/minecraft-button.tsx | 2 +- Frontend/src/app/components/navbar.tsx | 26 +-------- 5 files changed, 68 insertions(+), 54 deletions(-) create mode 100644 Frontend/src/app/components/github-star-button.tsx delete mode 100644 Frontend/src/app/components/github-star-count.tsx diff --git a/Frontend/src/app/components/github-star-button.tsx b/Frontend/src/app/components/github-star-button.tsx new file mode 100644 index 0000000..5c0a944 --- /dev/null +++ b/Frontend/src/app/components/github-star-button.tsx @@ -0,0 +1,58 @@ +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 => { + return ( + + + {/* Star Count */} + }> + + + + + Star on GitHub + + + ); +}; + +/** + * The github star count component. + * + * @returns the star count jsx + */ +const GitHubStarCount = async (): Promise => { + const stars: number = await getStarCount(); // Get the repo star count + return ( + {stars} + ); +}; + +/** + * Get the amount of stars + * the repository has. + * + * @returns the star count + */ +const getStarCount = async (): Promise => { + 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; diff --git a/Frontend/src/app/components/github-star-count.tsx b/Frontend/src/app/components/github-star-count.tsx deleted file mode 100644 index e0d2c32..0000000 --- a/Frontend/src/app/components/github-star-count.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * The github star count component. - * - * @returns the star count jsx - */ -const GitHubStarCount = async (): Promise => { - const stars: number = await getStarCount(); // Get the repo star count - return ( - {stars} - ); -}; - -/** - * Get the amount of stars - * the repository has. - * - * @returns the star count - */ -const getStarCount = async (): Promise => { - 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 GitHubStarCount; diff --git a/Frontend/src/app/components/landing/hero.tsx b/Frontend/src/app/components/landing/hero.tsx index 9b7f9be..7e0cf68 100644 --- a/Frontend/src/app/components/landing/hero.tsx +++ b/Frontend/src/app/components/landing/hero.tsx @@ -1,3 +1,4 @@ +import GitHubStarButton from "@/components/github-star-button"; import MinecraftButton from "@/components/minecraft-button"; import config from "@/config"; import { minecrafter } from "@/font/fonts"; @@ -27,10 +28,15 @@ const Hero = (): JSX.Element => ( {/* Links */} -
+
Get Started + + {/* Star on Github <3 */} +
+ +
); diff --git a/Frontend/src/app/components/minecraft-button.tsx b/Frontend/src/app/components/minecraft-button.tsx index 56b662b..c12251f 100644 --- a/Frontend/src/app/components/minecraft-button.tsx +++ b/Frontend/src/app/components/minecraft-button.tsx @@ -31,7 +31,7 @@ const MinecraftButton = ({ className={cn( "before:absolute before:-inset-x-5 before:rotate-90 before:w-9 before:h-1 before:bg-minecraft-green-1", // Left Green Bar "after:absolute after:right-[-1.24rem] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar - "relative h-11 px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling + "relative h-full px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling className )} variant="ghost" diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx index d41cd85..4428fdf 100644 --- a/Frontend/src/app/components/navbar.tsx +++ b/Frontend/src/app/components/navbar.tsx @@ -1,16 +1,12 @@ "use client"; -import GitHubStarCount from "@/components/github-star-count"; -import MinecraftButton from "@/components/minecraft-button"; -import { Skeleton } from "@/components/ui/skeleton"; +import GitHubStarButton from "@/components/github-star-button"; import config from "@/config"; import { minecrafter } from "@/font/fonts"; import { cn } from "@/lib/utils"; -import { StarIcon } from "@heroicons/react/24/outline"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { Suspense } from "react"; /** * The navbar for the site. @@ -68,25 +64,7 @@ const Navbar = (): JSX.Element => { {/* Social Buttons - Right */}
{/* Star on Github <3 */} - - - {/* Star Count */} - }> - - - - - Star on GitHub - - +
);