Cleanup and center the links in the navbar

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

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { ReactElement } from "react";
 import {
     getMojangServerStatus,
+    MojangServer,
     MojangServerStatus,
     MojangServerStatusResponse,
 } from "restfulmc-lib";
@@ -46,7 +47,8 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
 
             {/* Server Statuses */}
             <div className="w-[25rem] xs:w-[29rem] sm:w-[33.5rem] px-5 py-3.5 flex flex-col gap-2.5 bg-muted rounded-xl divide-y-2 divide-zinc-700/40 transition-all transform-gpu">
-                {servers.map((server, index) => {
+                {servers.map(
+                    (server: MojangServer, index: number): ReactElement => {
                         const status: MojangServerStatus = server.status; // The status of the server
                         return (
                             <div
@@ -81,7 +83,8 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
                                 </h2>
                             </div>
                         );
-                })}
+                    }
+                )}
             </div>
         </main>
     );
@@ -90,7 +93,9 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
 /**
  * The styles for each status.
  */
-const statusStyles: any = {
+const statusStyles: {
+    [status: string]: string;
+} = {
     ONLINE: "text-green-500",
     DEGRADED: "text-yellow-500",
     OFFLINE: "text-red-500",

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

@@ -2,7 +2,7 @@ import FeaturedContent from "@/components/landing/featured-content";
 import Hero from "@/components/landing/hero";
 import StatisticCounters from "@/components/landing/statistic-counters";
 import { ReactElement } from "react";
-import HeroBackground from "../components/landing/background";
+import HeroBackground from "@/components/landing/background";
 
 /**
  * The landing page.

Frontend/src/app/components/embed.tsx

@@ -12,6 +12,7 @@ type EmbedProps = {
     /**
      * The color of this embed, undefined
      * for no custom color.
+     * // TODO: make this work lol
      */
     color?: string | undefined;
 
@@ -52,7 +53,6 @@ const Embed = ({
         twitter: {
             card: "summary",
         },
-        themeColor: color,
     };
 };
 export default Embed;

Frontend/src/app/components/footer.tsx

@@ -6,6 +6,11 @@ import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 import { FooterLinks } from "@/types/config";
 
+/**
+ * The footer for the site.
+ *
+ * @returns the footer jsx
+ */
 const Footer = (): ReactElement => (
     <footer
         className={cn(

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

@@ -22,7 +22,7 @@ import {
 const GitHubStarButton = (): ReactElement => {
     const [stars, setStars]: [
         number | undefined,
-        Dispatch<SetStateAction<number | undefined>>
+        Dispatch<SetStateAction<number | undefined>>,
     ] = useState<number | undefined>(undefined); // The stars of the repository
 
     useEffect(() => {

Frontend/src/app/components/navbar.tsx

@@ -17,13 +17,12 @@ import { ReactElement } from "react";
 const Navbar = (): ReactElement => {
     const path: string = usePathname(); // Get the current path
     return (
-        <nav className="fixed inset-x-0 flex h-16 px-5 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
+        <nav className="fixed inset-x-0 flex h-16 px-2.5 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
-            {/* Left */}
+            <div className="relative w-full flex justify-between items-center">
-            <div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
+                {/* App Branding - Left */}
-                {/* App Branding */}
                 <Link
                     className={cn(
-                        "text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
+                        "text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu z-50",
                         minecrafter.className
                     )}
                     href="/"
@@ -41,7 +40,8 @@ const Navbar = (): ReactElement => {
                     <span className="hidden lg:flex">{config.siteName}</span>
                 </Link>
 
-                {/* Links */}
+                {/* Center - Links */}
+                <div className="absolute inset-x-0 md:left-20 lg:left-0 flex justify-center md:justify-start lg:justify-center">
                     <div className="flex gap-7">
                         {Object.entries(config.navbarLinks).map(
                             (link: [string, string], index: number) => {
@@ -69,6 +69,7 @@ const Navbar = (): ReactElement => {
                     {/* Star on Github <3 */}
                     <GitHubStarButton />
                 </div>
+            </div>
         </nav>
     );
 };

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

@@ -101,7 +101,11 @@ const PlayerResult = ({
                                         part === SkinPart.FACE ||
                                         part === SkinPart.BODY_FLAT
                                 )
-                                .map(([part, url], index) => (
+                                .map(
+                                    (
+                                        [part, url]: [string, string],
+                                        index: number
+                                    ) => (
                                         <Link
                                             key={index}
                                             href={url}
@@ -113,7 +117,8 @@ const PlayerResult = ({
                                                 alt={`${username}'s ${part}`}
                                             />
                                         </Link>
-                                ))}
+                                    )
+                                )}
                         </div>
                     </div>
                 </div>

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

@@ -1,11 +1,11 @@
 import { cn } from "@/lib/utils";
 import Image from "next/image";
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import {
     CachedBedrockMinecraftServer,
     CachedJavaMinecraftServer,
 } from "restfulmc-lib";
-import config from "../../config";
+import config from "@/config";
 
 /**
  * The props for a server result.
@@ -25,7 +25,7 @@ type ServerResultProps = {
  */
 const ServerResult = ({ server }: ServerResultProps): ReactElement => {
     const favicon: string | undefined = (server as CachedJavaMinecraftServer)
-        .favicon?.url; // The favicon of the server (TODO: bedrock)
+        .favicon?.url; // The favicon of the server
     return (
         <div
             className={cn(

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

@@ -62,7 +62,10 @@ const ServerSearch = ({
                         </SelectTrigger>
                         <SelectContent>
                             {Object.values(ServerPlatform).map(
-                                (platform, index) => (
+                                (
+                                    platform: ServerPlatform,
+                                    index: number
+                                ): ReactElement => (
                                     <SelectItem key={index} value={platform}>
                                         {capitialize(platform)}
                                     </SelectItem>