Changes

Frontend/.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .next/
+.fleet/
 .vscode/
 .env*.local
 next-env.d.ts

Frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4
+}

Frontend/src/app/(pages)/docs/page.tsx

@@ -3,6 +3,7 @@ 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.
@@ -16,7 +17,7 @@ export const metadata: Metadata = {
  *
  * @returns the page jsx
  */
-const DocsPage = (): JSX.Element => (
+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">

Frontend/src/app/(pages)/page.tsx

@@ -7,7 +7,7 @@ import StatisticCounters from "@/components/landing/statistic-counters";
  *
  * @returns the page jsx
  */
-const LandingPage = (): JSX.Element => (
+const LandingPage = (): ReactElement => (
     <main className="px-3">
         <Hero />
         <FeaturedContent />

Frontend/src/app/(pages)/player/[[...slug]]/page.tsx

@@ -7,13 +7,14 @@ 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> => {
+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

Frontend/src/app/components/counter.tsx

@@ -3,6 +3,7 @@
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 import CountUp from "react-countup";
+import { ReactElement } from "react";
 
 /**
  * Props for the counter.
@@ -34,10 +35,13 @@ type CounterProps = {
  * @param duration the optional duration of the count up
  * @returns the counter jsx
  */
-const Counter = ({ name, amount, duration }: CounterProps): JSX.Element => (
+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)}
+            className={cn(
+                "text-6xl text-minecraft-green-3",
+                minecrafter.className
+            )}
         >
             {name}
         </h1>

Frontend/src/app/components/creeper.tsx

@@ -1,11 +1,12 @@
 import Image from "next/image";
+import { ReactElement } from "react";
 
 /**
  * A creeper image.
  *
  * @returns the creeper jsx
  */
-const Creeper = (): JSX.Element => (
+const Creeper = (): ReactElement => (
     <Image
         src="/media/creeper.png"
         alt="A Minecraft Creeper"

Frontend/src/app/components/footer.tsx

@@ -1,2 +1,4 @@
-const Footer = (): JSX.Element => <footer>FOOTER</footer>;
+import { ReactElement } from "react";
+
+const Footer = (): ReactElement => <footer>FOOTER</footer>;
 export default Footer;

Frontend/src/app/components/github-star-button.tsx

@@ -4,7 +4,7 @@ import { StarIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { Suspense } from "react";
 
-const GitHubStarButton = async (): Promise<JSX.Element> => {
+const GitHubStarButton = async (): Promise<ReactElement> => {
     return (
         <Link
             href="https://github.com/Rainnny7/RESTfulMC"
@@ -13,7 +13,9 @@ const GitHubStarButton = async (): Promise<JSX.Element> => {
         >
             <MinecraftButton className="flex gap-1.5 items-center group/star">
                 {/* Star Count */}
-				<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
+                <Suspense
+                    fallback={<Skeleton className="w-4 h-5 rounded-md" />}
+                >
                     <GitHubStarCount />
                 </Suspense>
 

Frontend/src/app/components/landing/featured-content.tsx

@@ -3,18 +3,21 @@ 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 => (
+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, index) => (
+            {config.featuredItems.map(
+                (item: FeaturedItemProps, index: number) => (
                     <FeaturedItem key={index} {...item} />
-			))}
+                )
+            )}
         </div>
     </div>
 );
@@ -30,7 +33,7 @@ const FeaturedItem = ({
     description,
     image,
     href,
-}: FeaturedItemProps): JSX.Element => (
+}: 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}
@@ -39,7 +42,10 @@ const FeaturedItem = ({
         }}
     >
         <h1
-			className={cn("text-3xl font-semibold text-white", minecrafter.className)}
+            className={cn(
+                "text-3xl font-semibold text-white",
+                minecrafter.className
+            )}
         >
             {name}
         </h1>

Frontend/src/app/components/landing/hero.tsx

@@ -4,13 +4,14 @@ 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 => (
+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 */}
@@ -30,7 +31,9 @@ const Hero = (): JSX.Element => (
         {/* Links */}
         <div className="flex gap-5 xs:gap-10">
             <Link href="/docs">
-				<MinecraftButton className="w-44 h-12">Get Started</MinecraftButton>
+                <MinecraftButton className="w-44 h-12">
+                    Get Started
+                </MinecraftButton>
             </Link>
 
             {/* Star on Github <3 */}

Frontend/src/app/components/landing/statistic-counters.tsx

@@ -1,11 +1,12 @@
 import Counter from "@/components/counter";
+import { ReactElement } from "react";
 
 /**
  * The statistic counters component.
  *
  * @returns the counters jsx
  */
-const StatisticCounters = (): JSX.Element => (
+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} />

Frontend/src/app/components/navbar.tsx

@@ -7,13 +7,14 @@ 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 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">
@@ -42,7 +43,8 @@ const Navbar = (): JSX.Element => {
 
                 {/* Links */}
                 <div className="flex gap-7">
-					{Object.entries(config.navbarLinks).map((link, index) => {
+                    {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 (
@@ -57,7 +59,8 @@ const Navbar = (): JSX.Element => {
                                     {link[0]}
                                 </Link>
                             );
-					})}
+                        }
+                    )}
                 </div>
             </div>
 

Frontend/src/app/components/player/player-result.tsx

@@ -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.
@@ -18,7 +19,7 @@ const PlayerResult = ({
     },
 }: {
     player: CachedPlayer;
-}): JSX.Element => (
+}): 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">
@@ -33,11 +34,17 @@ const PlayerResult = ({
 
             {/* 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>
+                <h1 className="text-xl font-bold text-minecraft-green-3">
-				<code className="text-xs xs:text-sm text-zinc-300">{uniqueId}</code>
+                    {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>}
+                {legacy && (
+                    <p className="text-sm font-semibold uppercase">Legacy</p>
+                )}
             </div>
         </div>
 

Frontend/src/app/components/player/player-search.tsx

@@ -14,7 +14,7 @@ const PlayerSearch = ({
     query,
 }: {
     query: string | undefined;
-}): JSX.Element => {
+}): ReactElement => {
     const handleRedirect = async (form: FormData) => {
         "use server";
         redirect(`/player/${form.get("query")}`);