Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Show GitHub star button on smaller devices
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m47s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-17 18:04:32 -04:00
parent 2f419c1754
commit 6a9ec1fe9f
5 changed files with 68 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
Frontend/src/app/components/github-star-button.tsx Normal file
View File

@ -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<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;

28
Frontend/src/app/components/github-star-count.tsx
View File

@ -1,28 +0,0 @@
/**
* 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 GitHubStarCount;

8
Frontend/src/app/components/landing/hero.tsx
View File

@ -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 => (
</div>
{/* Links */}
<div className="flex gap-10">
<div className="flex gap-5 xs:gap-10">
<Link href="/docs">
<MinecraftButton className="w-44 h-12">Get Started</MinecraftButton>
</Link>
{/* Star on Github <3 */}
<div className="md:hidden">
<GitHubStarButton />
</div>
</div>
</div>
);

2
Frontend/src/app/components/minecraft-button.tsx
View File

@ -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"

26
Frontend/src/app/components/navbar.tsx
View File

@ -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 */}
<div className="hidden md:flex">
{/* Star on Github <3 */}
<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>
<GitHubStarButton />
</div>
</nav>
);