Changes
This commit is contained in:
parent
6a9ec1fe9f
commit
b560341068
1
Frontend/.gitignore
vendored
1
Frontend/.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
node_modules
|
||||
.next/
|
||||
.fleet/
|
||||
.vscode/
|
||||
.env*.local
|
||||
next-env.d.ts
|
||||
4
Frontend/.prettierrc
Normal file
4
Frontend/.prettierrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4
|
||||
}
|
||||
@ -3,12 +3,13 @@ import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* Page metadata.
|
||||
*/
|
||||
export const metadata: Metadata = {
|
||||
title: "Docs",
|
||||
title: "Docs",
|
||||
};
|
||||
|
||||
/**
|
||||
@ -16,34 +17,34 @@ export const metadata: Metadata = {
|
||||
*
|
||||
* @returns the page jsx
|
||||
*/
|
||||
const DocsPage = (): JSX.Element => (
|
||||
<main className="h-[64vh] flex flex-col gap-3 justify-center items-center">
|
||||
{/* Creeper */}
|
||||
<div className="absolute left-28 bottom-16 pointer-events-none">
|
||||
<Creeper />
|
||||
</div>
|
||||
const DocsPage = (): ReactElement => (
|
||||
<main className="h-[64vh] flex flex-col gap-3 justify-center items-center">
|
||||
{/* Creeper */}
|
||||
<div className="absolute left-28 bottom-16 pointer-events-none">
|
||||
<Creeper />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<h1
|
||||
className={cn(
|
||||
"text-6xl text-minecraft-green-3 pointer-events-none",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
Documentation
|
||||
</h1>
|
||||
{/* Header */}
|
||||
<h1
|
||||
className={cn(
|
||||
"text-6xl text-minecraft-green-3 pointer-events-none",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
Documentation
|
||||
</h1>
|
||||
|
||||
{/* Content */}
|
||||
<h2 className="text-xl">
|
||||
This page is still under construction, however we do have a{" "}
|
||||
<Link
|
||||
className="text-minecraft-green-4"
|
||||
href="https://git.rainnny.club/Rainnny/RESTfulMC/wiki"
|
||||
>
|
||||
Wiki
|
||||
</Link>
|
||||
!
|
||||
</h2>
|
||||
</main>
|
||||
{/* Content */}
|
||||
<h2 className="text-xl">
|
||||
This page is still under construction, however we do have a{" "}
|
||||
<Link
|
||||
className="text-minecraft-green-4"
|
||||
href="https://git.rainnny.club/Rainnny/RESTfulMC/wiki"
|
||||
>
|
||||
Wiki
|
||||
</Link>
|
||||
!
|
||||
</h2>
|
||||
</main>
|
||||
);
|
||||
export default DocsPage;
|
||||
|
||||
@ -7,11 +7,11 @@ import StatisticCounters from "@/components/landing/statistic-counters";
|
||||
*
|
||||
* @returns the page jsx
|
||||
*/
|
||||
const LandingPage = (): JSX.Element => (
|
||||
<main className="px-3">
|
||||
<Hero />
|
||||
<FeaturedContent />
|
||||
<StatisticCounters />
|
||||
</main>
|
||||
const LandingPage = (): ReactElement => (
|
||||
<main className="px-3">
|
||||
<Hero />
|
||||
<FeaturedContent />
|
||||
<StatisticCounters />
|
||||
</main>
|
||||
);
|
||||
export default LandingPage;
|
||||
|
||||
@ -7,62 +7,63 @@ import { PageProps } from "@/types/page";
|
||||
import { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* The page to lookup a player.
|
||||
*
|
||||
* @returns the page jsx
|
||||
*/
|
||||
const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
|
||||
let error: string | undefined = undefined; // The error to display
|
||||
let result: CachedPlayer | undefined = undefined; // The player to display
|
||||
const query: string | undefined = trimQuery(params.slug?.[0]); // The query to search for
|
||||
const PlayerPage = async ({ params }: PageProps): Promise<ReactElement> => {
|
||||
let error: string | undefined = undefined; // The error to display
|
||||
let result: CachedPlayer | undefined = undefined; // The player to display
|
||||
const query: string | undefined = trimQuery(params.slug?.[0]); // The query to search for
|
||||
|
||||
// Try and get the player to display
|
||||
try {
|
||||
result = query ? await getPlayer(query) : undefined;
|
||||
} catch (err) {
|
||||
error = (err as RestfulMCAPIError).message; // Set the error message
|
||||
}
|
||||
// Try and get the player to display
|
||||
try {
|
||||
result = query ? await getPlayer(query) : undefined;
|
||||
} catch (err) {
|
||||
error = (err as RestfulMCAPIError).message; // Set the error message
|
||||
}
|
||||
|
||||
// Render the page
|
||||
return (
|
||||
<main className="px-3 h-screen flex justify-center items-center">
|
||||
<div className="mt-0 sm:mt-[45rem] xl:mt-0 flex flex-col xl:flex-row xl:gap-24 2xl:gap-48 transition-all transform-gpu">
|
||||
{/* Banner */}
|
||||
<Image
|
||||
className="hidden sm:flex xl:my-auto h-[28rem] pointer-events-none"
|
||||
src="/media/players.webp"
|
||||
alt="Minecraft Players"
|
||||
width={632}
|
||||
height={632}
|
||||
/>
|
||||
// Render the page
|
||||
return (
|
||||
<main className="px-3 h-screen flex justify-center items-center">
|
||||
<div className="mt-0 sm:mt-[45rem] xl:mt-0 flex flex-col xl:flex-row xl:gap-24 2xl:gap-48 transition-all transform-gpu">
|
||||
{/* Banner */}
|
||||
<Image
|
||||
className="hidden sm:flex xl:my-auto h-[28rem] pointer-events-none"
|
||||
src="/media/players.webp"
|
||||
alt="Minecraft Players"
|
||||
width={632}
|
||||
height={632}
|
||||
/>
|
||||
|
||||
{/* Search */}
|
||||
<div className="pb-16 xl:pb-0 flex flex-col gap-7">
|
||||
<h1
|
||||
className={cn(
|
||||
"mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
Player Lookup
|
||||
</h1>
|
||||
{/* Search */}
|
||||
<div className="pb-16 xl:pb-0 flex flex-col gap-7">
|
||||
<h1
|
||||
className={cn(
|
||||
"mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
Player Lookup
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-col gap-5 px-10 xs:px-0">
|
||||
{/* Error */}
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
<div className="flex flex-col gap-5 px-10 xs:px-0">
|
||||
{/* Error */}
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
|
||||
{/* Search */}
|
||||
<PlayerSearch query={query} />
|
||||
</div>
|
||||
{/* Search */}
|
||||
<PlayerSearch query={query} />
|
||||
</div>
|
||||
|
||||
{/* Player Result */}
|
||||
{result && <PlayerResult player={result} />}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
{/* Player Result */}
|
||||
{result && <PlayerResult player={result} />}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -73,35 +74,35 @@ const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
|
||||
* @returns the generated metadata
|
||||
*/
|
||||
export const generateMetadata = async ({
|
||||
params,
|
||||
params,
|
||||
}: PageProps): Promise<Metadata> => {
|
||||
const query: string | undefined = trimQuery(params.slug?.[0]); // The query to embed for
|
||||
const query: string | undefined = trimQuery(params.slug?.[0]); // The query to embed for
|
||||
|
||||
// Try and get the player to display
|
||||
if (query) {
|
||||
try {
|
||||
const player: CachedPlayer = await getPlayer(query); // Get the player to embed
|
||||
return Embed({
|
||||
title: `${player.username}'s Profile`,
|
||||
description: `UUID: ${player.uniqueId}\n\nClick to view data about this player.`,
|
||||
thumbnail: player.skin.parts.HEAD,
|
||||
});
|
||||
} catch (err) {
|
||||
const code: number = (err as RestfulMCAPIError).code; // Get the error status code
|
||||
if (code === 400) {
|
||||
return Embed({
|
||||
title: "Invalid Player",
|
||||
description: "The player you searched for is invalid.",
|
||||
});
|
||||
} else if (code === 404) {
|
||||
return Embed({
|
||||
title: "Player Not Found",
|
||||
description: "The player you searched for was not found.",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return {};
|
||||
// Try and get the player to display
|
||||
if (query) {
|
||||
try {
|
||||
const player: CachedPlayer = await getPlayer(query); // Get the player to embed
|
||||
return Embed({
|
||||
title: `${player.username}'s Profile`,
|
||||
description: `UUID: ${player.uniqueId}\n\nClick to view data about this player.`,
|
||||
thumbnail: player.skin.parts.HEAD,
|
||||
});
|
||||
} catch (err) {
|
||||
const code: number = (err as RestfulMCAPIError).code; // Get the error status code
|
||||
if (code === 400) {
|
||||
return Embed({
|
||||
title: "Invalid Player",
|
||||
description: "The player you searched for is invalid.",
|
||||
});
|
||||
} else if (code === 404) {
|
||||
return Embed({
|
||||
title: "Player Not Found",
|
||||
description: "The player you searched for was not found.",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
/**
|
||||
@ -111,11 +112,11 @@ export const generateMetadata = async ({
|
||||
* @returns the trimmed query
|
||||
*/
|
||||
const trimQuery = (query: string | undefined): string | undefined => {
|
||||
// Limit the query to 36 chars
|
||||
if (query && query.length > 36) {
|
||||
query = query.substr(0, 36);
|
||||
}
|
||||
return query;
|
||||
// Limit the query to 36 chars
|
||||
if (query && query.length > 36) {
|
||||
query = query.substr(0, 36);
|
||||
}
|
||||
return query;
|
||||
};
|
||||
|
||||
export default PlayerPage;
|
||||
|
||||
@ -3,28 +3,29 @@
|
||||
import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import CountUp from "react-countup";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* Props for the counter.
|
||||
*/
|
||||
type CounterProps = {
|
||||
/**
|
||||
* The name of the counter.
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* The name of the counter.
|
||||
*/
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* The amount to count up to.
|
||||
*/
|
||||
amount: number;
|
||||
/**
|
||||
* The amount to count up to.
|
||||
*/
|
||||
amount: number;
|
||||
|
||||
/**
|
||||
* The optional duration of the count up.
|
||||
* <p>
|
||||
* Uses the default duration if not provided.
|
||||
* </p>
|
||||
*/
|
||||
duration?: number | undefined;
|
||||
/**
|
||||
* The optional duration of the count up.
|
||||
* <p>
|
||||
* Uses the default duration if not provided.
|
||||
* </p>
|
||||
*/
|
||||
duration?: number | undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -34,16 +35,19 @@ type CounterProps = {
|
||||
* @param duration the optional duration of the count up
|
||||
* @returns the counter jsx
|
||||
*/
|
||||
const Counter = ({ name, amount, duration }: CounterProps): JSX.Element => (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<h1
|
||||
className={cn("text-6xl text-minecraft-green-3", minecrafter.className)}
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
<h2 className="text-4xl font-semibold uppercase">
|
||||
<CountUp start={0} end={amount} duration={duration} />
|
||||
</h2>
|
||||
</div>
|
||||
const Counter = ({ name, amount, duration }: CounterProps): ReactElement => (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<h1
|
||||
className={cn(
|
||||
"text-6xl text-minecraft-green-3",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
<h2 className="text-4xl font-semibold uppercase">
|
||||
<CountUp start={0} end={amount} duration={duration} />
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
export default Counter;
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
import Image from "next/image";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* A creeper image.
|
||||
*
|
||||
* @returns the creeper jsx
|
||||
*/
|
||||
const Creeper = (): JSX.Element => (
|
||||
<Image
|
||||
src="/media/creeper.png"
|
||||
alt="A Minecraft Creeper"
|
||||
width={216}
|
||||
height={216}
|
||||
/>
|
||||
const Creeper = (): ReactElement => (
|
||||
<Image
|
||||
src="/media/creeper.png"
|
||||
alt="A Minecraft Creeper"
|
||||
width={216}
|
||||
height={216}
|
||||
/>
|
||||
);
|
||||
export default Creeper;
|
||||
|
||||
@ -1,2 +1,4 @@
|
||||
const Footer = (): JSX.Element => <footer>FOOTER</footer>;
|
||||
import { ReactElement } from "react";
|
||||
|
||||
const Footer = (): ReactElement => <footer>FOOTER</footer>;
|
||||
export default Footer;
|
||||
|
||||
@ -4,28 +4,30 @@ 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>
|
||||
const GitHubStarButton = async (): Promise<ReactElement> => {
|
||||
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>
|
||||
);
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -34,10 +36,10 @@ const GitHubStarButton = async (): Promise<JSX.Element> => {
|
||||
* @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>
|
||||
);
|
||||
const stars: number = await getStarCount(); // Get the repo star count
|
||||
return (
|
||||
<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -47,12 +49,12 @@ const GitHubStarCount = async (): Promise<JSX.Element> => {
|
||||
* @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
|
||||
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;
|
||||
|
||||
@ -3,20 +3,23 @@ import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FeaturedItemProps } from "@/types/config";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* The featured content component.
|
||||
*
|
||||
* @returns the featured content jsx
|
||||
*/
|
||||
const FeaturedContent = (): JSX.Element => (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="max-w-2xl flex flex-wrap justify-center gap-5">
|
||||
{config.featuredItems.map((item, index) => (
|
||||
<FeaturedItem key={index} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
const FeaturedContent = (): ReactElement => (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="max-w-2xl flex flex-wrap justify-center gap-5">
|
||||
{config.featuredItems.map(
|
||||
(item: FeaturedItemProps, index: number) => (
|
||||
<FeaturedItem key={index} {...item} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
/**
|
||||
@ -26,25 +29,28 @@ const FeaturedContent = (): JSX.Element => (
|
||||
* @returns the item jsx
|
||||
*/
|
||||
const FeaturedItem = ({
|
||||
name,
|
||||
description,
|
||||
image,
|
||||
href,
|
||||
}: FeaturedItemProps): JSX.Element => (
|
||||
<Link
|
||||
className="pt-28 w-[19rem] h-80 flex flex-col gap-1 items-center bg-center bg-cover bg-no-repeat rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu"
|
||||
href={href}
|
||||
style={{
|
||||
backgroundImage: `url(${image})`,
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className={cn("text-3xl font-semibold text-white", minecrafter.className)}
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
<h2 className="text-md max-w-[15rem]">{description}</h2>
|
||||
</Link>
|
||||
name,
|
||||
description,
|
||||
image,
|
||||
href,
|
||||
}: FeaturedItemProps): ReactElement => (
|
||||
<Link
|
||||
className="pt-28 w-[19rem] h-80 flex flex-col gap-1 items-center bg-center bg-cover bg-no-repeat rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu"
|
||||
href={href}
|
||||
style={{
|
||||
backgroundImage: `url(${image})`,
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
className={cn(
|
||||
"text-3xl font-semibold text-white",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
<h2 className="text-md max-w-[15rem]">{description}</h2>
|
||||
</Link>
|
||||
);
|
||||
|
||||
export default FeaturedContent;
|
||||
|
||||
@ -4,40 +4,43 @@ import config from "@/config";
|
||||
import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* The hero content.
|
||||
*
|
||||
* @returns the hero jsx
|
||||
*/
|
||||
const Hero = (): JSX.Element => (
|
||||
<div className="pt-56 pb-40 flex flex-col gap-8 justify-center items-center">
|
||||
<div className="flex flex-col gap-4 items-center text-center">
|
||||
{/* Title */}
|
||||
<h1
|
||||
className={cn(
|
||||
"text-5xl sm:text-6xl text-minecraft-green-3",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
{config.siteName}
|
||||
</h1>
|
||||
const Hero = (): ReactElement => (
|
||||
<div className="pt-56 pb-40 flex flex-col gap-8 justify-center items-center">
|
||||
<div className="flex flex-col gap-4 items-center text-center">
|
||||
{/* Title */}
|
||||
<h1
|
||||
className={cn(
|
||||
"text-5xl sm:text-6xl text-minecraft-green-3",
|
||||
minecrafter.className
|
||||
)}
|
||||
>
|
||||
{config.siteName}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<h2 className="text-xl">{config.metadata.description}</h2>
|
||||
</div>
|
||||
{/* Subtitle */}
|
||||
<h2 className="text-xl">{config.metadata.description}</h2>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-5 xs:gap-10">
|
||||
<Link href="/docs">
|
||||
<MinecraftButton className="w-44 h-12">Get Started</MinecraftButton>
|
||||
</Link>
|
||||
{/* Links */}
|
||||
<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>
|
||||
{/* Star on Github <3 */}
|
||||
<div className="md:hidden">
|
||||
<GitHubStarButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default Hero;
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
import Counter from "@/components/counter";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* The statistic counters component.
|
||||
*
|
||||
* @returns the counters jsx
|
||||
*/
|
||||
const StatisticCounters = (): JSX.Element => (
|
||||
<div className="py-56 flex justify-center items-center">
|
||||
<div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24">
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
</div>
|
||||
</div>
|
||||
const StatisticCounters = (): ReactElement => (
|
||||
<div className="py-56 flex justify-center items-center">
|
||||
<div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-24">
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
<Counter name="Testing" amount={1_000_000} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default StatisticCounters;
|
||||
|
||||
@ -7,66 +7,69 @@ import { cn } from "@/lib/utils";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* The navbar for the site.
|
||||
*
|
||||
* @returns the navbar jsx
|
||||
*/
|
||||
const Navbar = (): JSX.Element => {
|
||||
const path: string = usePathname(); // Get the current path
|
||||
return (
|
||||
<nav className="fixed inset-x-0 flex h-16 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
|
||||
{/* Left */}
|
||||
<div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
|
||||
{/* App Branding */}
|
||||
<Link
|
||||
className={cn(
|
||||
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
|
||||
minecrafter.className
|
||||
)}
|
||||
href="/"
|
||||
>
|
||||
{/* Small Screens */}
|
||||
<Image
|
||||
className="lg:hidden"
|
||||
src="/media/logo.webp"
|
||||
alt="Site Logo"
|
||||
width={42}
|
||||
height={42}
|
||||
/>
|
||||
const Navbar = (): ReactElement => {
|
||||
const path: string = usePathname(); // Get the current path
|
||||
return (
|
||||
<nav className="fixed inset-x-0 flex h-16 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
|
||||
{/* Left */}
|
||||
<div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
|
||||
{/* App Branding */}
|
||||
<Link
|
||||
className={cn(
|
||||
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
|
||||
minecrafter.className
|
||||
)}
|
||||
href="/"
|
||||
>
|
||||
{/* Small Screens */}
|
||||
<Image
|
||||
className="lg:hidden"
|
||||
src="/media/logo.webp"
|
||||
alt="Site Logo"
|
||||
width={42}
|
||||
height={42}
|
||||
/>
|
||||
|
||||
{/* Large Screens */}
|
||||
<span className="hidden lg:flex">{config.siteName}</span>
|
||||
</Link>
|
||||
{/* Large Screens */}
|
||||
<span className="hidden lg:flex">{config.siteName}</span>
|
||||
</Link>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-7">
|
||||
{Object.entries(config.navbarLinks).map((link, index) => {
|
||||
const url: string = link[1]; // The href of the link
|
||||
let active: boolean = path.startsWith(url); // Is this the active link?
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
className={cn(
|
||||
"font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
|
||||
active && "text-minecraft-green-4"
|
||||
)}
|
||||
href={url}
|
||||
>
|
||||
{link[0]}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Links */}
|
||||
<div className="flex gap-7">
|
||||
{Object.entries(config.navbarLinks).map(
|
||||
(link: [string, string], index: number) => {
|
||||
const url: string = link[1]; // The href of the link
|
||||
let active: boolean = path.startsWith(url); // Is this the active link?
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
className={cn(
|
||||
"font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu",
|
||||
active && "text-minecraft-green-4"
|
||||
)}
|
||||
href={url}
|
||||
>
|
||||
{link[0]}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Buttons - Right */}
|
||||
<div className="hidden md:flex">
|
||||
{/* Star on Github <3 */}
|
||||
<GitHubStarButton />
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
{/* Social Buttons - Right */}
|
||||
<div className="hidden md:flex">
|
||||
{/* Star on Github <3 */}
|
||||
<GitHubStarButton />
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
export default Navbar;
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { CachedPlayer, SkinPart } from "restfulmc-lib";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
/**
|
||||
* The result of a player search.
|
||||
@ -10,62 +11,68 @@ import { CachedPlayer, SkinPart } from "restfulmc-lib";
|
||||
* @returns the player result jsx
|
||||
*/
|
||||
const PlayerResult = ({
|
||||
player: {
|
||||
uniqueId,
|
||||
username,
|
||||
skin: { parts },
|
||||
legacy,
|
||||
},
|
||||
player: {
|
||||
uniqueId,
|
||||
username,
|
||||
skin: { parts },
|
||||
legacy,
|
||||
},
|
||||
}: {
|
||||
player: CachedPlayer;
|
||||
}): JSX.Element => (
|
||||
<div className="px-2 py-3 flex flex-col gap-3 items-center bg-muted rounded-xl divide-y divide-zinc-700">
|
||||
{/* Details */}
|
||||
<div className="flex gap-5 items-center">
|
||||
{/* Player Head */}
|
||||
<Image
|
||||
className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
|
||||
src={parts.HEAD}
|
||||
alt={`${username}'s Head`}
|
||||
width={128}
|
||||
height={128}
|
||||
/>
|
||||
player: CachedPlayer;
|
||||
}): ReactElement => (
|
||||
<div className="px-2 py-3 flex flex-col gap-3 items-center bg-muted rounded-xl divide-y divide-zinc-700">
|
||||
{/* Details */}
|
||||
<div className="flex gap-5 items-center">
|
||||
{/* Player Head */}
|
||||
<Image
|
||||
className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
|
||||
src={parts.HEAD}
|
||||
alt={`${username}'s Head`}
|
||||
width={128}
|
||||
height={128}
|
||||
/>
|
||||
|
||||
{/* Name, Unique ID, and Badges */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1>
|
||||
<code className="text-xs xs:text-sm text-zinc-300">{uniqueId}</code>
|
||||
{/* Name, Unique ID, and Badges */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h1 className="text-xl font-bold text-minecraft-green-3">
|
||||
{username}
|
||||
</h1>
|
||||
<code className="text-xs xs:text-sm text-zinc-300">
|
||||
{uniqueId}
|
||||
</code>
|
||||
|
||||
{/* Legacy Badge */}
|
||||
{legacy && <p className="text-sm font-semibold uppercase">Legacy</p>}
|
||||
</div>
|
||||
</div>
|
||||
{/* Legacy Badge */}
|
||||
{legacy && (
|
||||
<p className="text-sm font-semibold uppercase">Legacy</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skin Parts */}
|
||||
<div className="pt-3 w-[90%] flex flex-col gap-3">
|
||||
{/* Header */}
|
||||
<h1 className="font-semibold uppercase">Skin Parts</h1>
|
||||
{/* Skin Parts */}
|
||||
<div className="pt-3 w-[90%] flex flex-col gap-3">
|
||||
{/* Header */}
|
||||
<h1 className="font-semibold uppercase">Skin Parts</h1>
|
||||
|
||||
{/* Skin Parts */}
|
||||
<div className="flex gap-5">
|
||||
{Object.entries(parts)
|
||||
.filter(
|
||||
([part]) =>
|
||||
part === SkinPart.HEAD ||
|
||||
part === SkinPart.FACE ||
|
||||
part === SkinPart.BODY_FLAT
|
||||
)
|
||||
.map(([part, url], index) => (
|
||||
<Link key={index} href={url} target="_blank">
|
||||
<img
|
||||
className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
|
||||
src={url}
|
||||
alt={`${username}'s ${part}`}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Skin Parts */}
|
||||
<div className="flex gap-5">
|
||||
{Object.entries(parts)
|
||||
.filter(
|
||||
([part]) =>
|
||||
part === SkinPart.HEAD ||
|
||||
part === SkinPart.FACE ||
|
||||
part === SkinPart.BODY_FLAT
|
||||
)
|
||||
.map(([part, url], index) => (
|
||||
<Link key={index} href={url} target="_blank">
|
||||
<img
|
||||
className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
|
||||
src={url}
|
||||
alt={`${username}'s ${part}`}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default PlayerResult;
|
||||
|
||||
@ -11,31 +11,31 @@ import { redirect } from "next/navigation";
|
||||
* @returns the search component jsx
|
||||
*/
|
||||
const PlayerSearch = ({
|
||||
query,
|
||||
query,
|
||||
}: {
|
||||
query: string | undefined;
|
||||
}): JSX.Element => {
|
||||
const handleRedirect = async (form: FormData) => {
|
||||
"use server";
|
||||
redirect(`/player/${form.get("query")}`);
|
||||
};
|
||||
return (
|
||||
<form
|
||||
className="flex flex-col gap-7 justify-center items-center"
|
||||
action={handleRedirect}
|
||||
>
|
||||
<div className="w-full flex flex-col gap-3">
|
||||
<Label htmlFor="query">Username or UUID</Label>
|
||||
<Input
|
||||
type="search"
|
||||
name="query"
|
||||
placeholder="Query..."
|
||||
defaultValue={query}
|
||||
maxLength={36}
|
||||
/>
|
||||
</div>
|
||||
<MinecraftButton type="submit">Search</MinecraftButton>
|
||||
</form>
|
||||
);
|
||||
query: string | undefined;
|
||||
}): ReactElement => {
|
||||
const handleRedirect = async (form: FormData) => {
|
||||
"use server";
|
||||
redirect(`/player/${form.get("query")}`);
|
||||
};
|
||||
return (
|
||||
<form
|
||||
className="flex flex-col gap-7 justify-center items-center"
|
||||
action={handleRedirect}
|
||||
>
|
||||
<div className="w-full flex flex-col gap-3">
|
||||
<Label htmlFor="query">Username or UUID</Label>
|
||||
<Input
|
||||
type="search"
|
||||
name="query"
|
||||
placeholder="Query..."
|
||||
defaultValue={query}
|
||||
maxLength={36}
|
||||
/>
|
||||
</div>
|
||||
<MinecraftButton type="submit">Search</MinecraftButton>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
export default PlayerSearch;
|
||||
|
||||
@ -3,76 +3,76 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 30 5% 9%;
|
||||
--foreground: 0 0% 98%;
|
||||
:root {
|
||||
--background: 30 5% 9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 20 4% 14%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--muted: 20 4% 14%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-background: 0 0% 7%;
|
||||
/* Navbar */
|
||||
--navbar-background: 0 0% 7%;
|
||||
|
||||
/* Minecraft Colors (Dark -> Light) */
|
||||
--minecraft-green-1: 108 56% 25%;
|
||||
--minecraft-green-2: 107 55% 34%;
|
||||
--minecraft-green-3: 104 51% 43%;
|
||||
--minecraft-green-4: 103 50% 53%;
|
||||
}
|
||||
/* Minecraft Colors (Dark -> Light) */
|
||||
--minecraft-green-1: 108 56% 25%;
|
||||
--minecraft-green-2: 107 55% 34%;
|
||||
--minecraft-green-3: 104 51% 43%;
|
||||
--minecraft-green-4: 103 50% 53%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
* {
|
||||
@apply border-border;
|
||||
|
||||
/* Scrollbar (Firefox) */
|
||||
scrollbar-color: hsl(var(--minecraft-green-2)) hsl(var(--background));
|
||||
}
|
||||
/* Scrollbar (Firefox) */
|
||||
scrollbar-color: hsl(var(--minecraft-green-2)) hsl(var(--background));
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar (Chrome & Safari) */
|
||||
@layer base {
|
||||
::-webkit-scrollbar {
|
||||
@apply w-1.5;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
@apply w-1.5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-inherit;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-inherit;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-minecraft-green-2 rounded-3xl;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-minecraft-green-2 rounded-3xl;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-opacity-80;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-opacity-80;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user