Show GitHub star button on smaller devices
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m47s
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m47s
This commit is contained in:
parent
2f419c1754
commit
6a9ec1fe9f
58
Frontend/src/app/components/github-star-button.tsx
Normal file
58
Frontend/src/app/components/github-star-button.tsx
Normal 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;
|
@ -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;
|
|
@ -1,3 +1,4 @@
|
|||||||
|
import GitHubStarButton from "@/components/github-star-button";
|
||||||
import MinecraftButton from "@/components/minecraft-button";
|
import MinecraftButton from "@/components/minecraft-button";
|
||||||
import config from "@/config";
|
import config from "@/config";
|
||||||
import { minecrafter } from "@/font/fonts";
|
import { minecrafter } from "@/font/fonts";
|
||||||
@ -27,10 +28,15 @@ const Hero = (): JSX.Element => (
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Links */}
|
{/* Links */}
|
||||||
<div className="flex gap-10">
|
<div className="flex gap-5 xs:gap-10">
|
||||||
<Link href="/docs">
|
<Link href="/docs">
|
||||||
<MinecraftButton className="w-44 h-12">Get Started</MinecraftButton>
|
<MinecraftButton className="w-44 h-12">Get Started</MinecraftButton>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
{/* Star on Github <3 */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<GitHubStarButton />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -31,7 +31,7 @@ const MinecraftButton = ({
|
|||||||
className={cn(
|
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
|
"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
|
"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
|
className
|
||||||
)}
|
)}
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
@ -1,16 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import GitHubStarCount from "@/components/github-star-count";
|
import GitHubStarButton from "@/components/github-star-button";
|
||||||
import MinecraftButton from "@/components/minecraft-button";
|
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
|
||||||
import config from "@/config";
|
import config from "@/config";
|
||||||
import { minecrafter } from "@/font/fonts";
|
import { minecrafter } from "@/font/fonts";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { StarIcon } from "@heroicons/react/24/outline";
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { Suspense } from "react";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The navbar for the site.
|
* The navbar for the site.
|
||||||
@ -68,25 +64,7 @@ const Navbar = (): JSX.Element => {
|
|||||||
{/* Social Buttons - Right */}
|
{/* Social Buttons - Right */}
|
||||||
<div className="hidden md:flex">
|
<div className="hidden md:flex">
|
||||||
{/* Star on Github <3 */}
|
{/* Star on Github <3 */}
|
||||||
<Link
|
<GitHubStarButton />
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user