warning fixes

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

@@ -1,6 +1,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";
 
 /**
  * The landing page.

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

@@ -114,7 +114,7 @@ export const generateMetadata = async ({
 const trimQuery = (query: string | undefined): string | undefined => {
     // Limit the query to 36 chars
     if (query && query.length > 36) {
-        query = query.substr(0, 36);
+        query = query.substring(0, 36);
     }
     return query;
 };

Frontend/src/app/components/embed.tsx

@@ -1,20 +1,23 @@
 import { Metadata } from "next";
 
+/**
+ * Props for an embed.
+ */
 type EmbedProps = {
-	/**
+    /**
-	 * The title of the embed.
+     * The title of the embed.
-	 */
+     */
-	title: string;
+    title: string;
 
-	/**
+    /**
-	 * The description of the embed.
+     * The description of the embed.
-	 */
+     */
-	description: string;
+    description: string;
 
-	/**
+    /**
-	 * The optional thumbnail image of the embed.
+     * The optional thumbnail image of the embed.
-	 */
+     */
-	thumbnail?: string;
+    thumbnail?: string;
 };
 
 /**
@@ -24,24 +27,24 @@ type EmbedProps = {
  * @returns the embed jsx
  */
 const Embed = ({
-	title,
+    title,
-	description,
+    description,
-	thumbnail = "",
+    thumbnail = "",
 }: EmbedProps): Metadata => {
-	return {
+    return {
-		title: title,
+        title: title,
-		openGraph: {
+        openGraph: {
-			title: `${title}`,
+            title: `${title}`,
-			description: description,
+            description: description,
-			images: [
+            images: [
-				{
+                {
-					url: thumbnail,
+                    url: thumbnail,
-				},
+                },
-			],
+            ],
-		},
+        },
-		twitter: {
+        twitter: {
-			card: "summary",
+            card: "summary",
-		},
+        },
-	};
+    };
 };
 export default Embed;

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

@@ -2,8 +2,14 @@ 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";
+import { ReactElement, Suspense } from "react";
 
+/**
+ * The button to display the amount
+ * of stars the GitHub repository has.
+ *
+ * @returns the component jsx
+ */
 const GitHubStarButton = async (): Promise<ReactElement> => {
     return (
         <Link
@@ -35,7 +41,7 @@ const GitHubStarButton = async (): Promise<ReactElement> => {
  *
  * @returns the star count jsx
  */
-const GitHubStarCount = async (): Promise<JSX.Element> => {
+const GitHubStarCount = async (): Promise<ReactElement> => {
     const stars: number = await getStarCount(); // Get the repo star count
     return (
         <code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>

Frontend/src/app/components/minecraft-button.tsx

@@ -1,19 +1,20 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
 
 /**
  * Props for this button.
  */
 type MinecraftButtonProps = {
-	/**
+    /**
-	 * The class name to apply to this button.
+     * The class name to apply to this button.
-	 */
+     */
-	className?: string;
+    className?: string;
 
-	/**
+    /**
-	 * The children of this button.
+     * The children of this button.
-	 */
+     */
-	children: React.ReactNode;
+    children: ReactNode;
 };
 
 /**
@@ -22,27 +23,27 @@ type MinecraftButtonProps = {
  * @returns the button jsx
  */
 const MinecraftButton = ({
-	className,
+    className,
-	children,
+    children,
-	...props
+    ...props
-}: React.ButtonHTMLAttributes<HTMLButtonElement> &
+}: ButtonHTMLAttributes<HTMLButtonElement> &
-	MinecraftButtonProps): JSX.Element => (
+    MinecraftButtonProps): ReactElement => (
-	<Button
+    <Button
-		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-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
+            "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"
-		style={{
+        style={{
-			// Above and below the button shadow
+            // Above and below the button shadow
-			boxShadow:
+            boxShadow:
-				"inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3))",
+                "inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3))",
-		}}
+        }}
-		{...props}
+        {...props}
-	>
+    >
-		{children}
+        {children}
-	</Button>
+    </Button>
 );
 export default MinecraftButton;

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

@@ -3,6 +3,7 @@ import { Input } from "@/components/ui/input";
 
 import { Label } from "@/components/ui/label";
 import { redirect } from "next/navigation";
+import { ReactElement } from "react";
 
 /**
  * A component for searching for a player.
@@ -15,7 +16,7 @@ const PlayerSearch = ({
 }: {
     query: string | undefined;
 }): ReactElement => {
-    const handleRedirect = async (form: FormData) => {
+    const handleRedirect = async (form: FormData): Promise<void> => {
         "use server";
         redirect(`/player/${form.get("query")}`);
     };

Frontend/src/app/config.ts

@@ -1,7 +1,5 @@
-import { Config } from "@/types/config";
-
 /**
  * The configuration for this app.
  */
-const config: Config = require("@/configJson");
+import config from "@/configJson";
 export default config;

Frontend/src/app/layout.tsx

@@ -8,7 +8,7 @@ import ThemeProvider from "@/provider/theme-provider";
 import type { Metadata, Viewport } from "next";
 import PlausibleProvider from "next-plausible";
 import "./globals.css";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 
 /**
  * Site metadata & viewport.
@@ -25,7 +25,7 @@ export const viewport: Viewport = config.viewport;
 const RootLayout = ({
     children,
 }: Readonly<{
-    children: React.ReactNode;
+    children: ReactNode;
 }>): ReactElement => {
     const analyticsDomain: string | undefined = config.analyticsDomain;
     return (

Frontend/src/app/lib/utils.ts

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: ClassValue[]) {
+export function cn(...inputs: ClassValue[]): string {
-	return twMerge(clsx(inputs));
+    return twMerge(clsx(inputs));
 }