add motd to the server page

src/app/components/card.tsx

@@ -2,6 +2,6 @@ export function Card({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>) {
+}>): JSX.Element {
   return <div className="bg-secondary rounded-lg p-4">{children}</div>;
 }

src/app/components/container.tsx

@@ -4,7 +4,7 @@ export default function Container({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>) {
+}>): JSX.Element {
   return (
     <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
       <NavBar />

src/app/components/icon/icon-props.ts

@@ -0,0 +1,11 @@
+export type IconProps = {
+  /**
+   * The size of the icon
+   */
+  size?: number;
+
+  /**
+   * The color of the icon
+   */
+  color?: string;
+};

src/app/components/icon/moon-icon.tsx

@@ -0,0 +1,9 @@
+import { IconProps } from "./icon-props";
+
+export function MoonIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
+      <path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
+    </svg>
+  );
+}

src/app/components/icon/sun-icon.tsx

@@ -0,0 +1,9 @@
+import { IconProps } from "./icon-props";
+
+export function SunIcon({ size = 24, color = "#fff" }: IconProps): JSX.Element {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill={color} viewBox="0 -960 960 960">
+      <path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
+    </svg>
+  );
+}

src/app/components/logo.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-export default function Logo({ size = 30 }: Readonly<{ size?: number }>) {
+export default function Logo({ size = 30 }: Readonly<{ size?: number }>): JSX.Element {
   return (
     <Image
       src="https://git.fascinated.cc/MinecraftUtilities/Assets/raw/branch/master/logo.png"

src/app/components/navbar.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import Logo from "./logo";
 import { RedirectButton } from "./rediect-button";
+import { ToggleThemeButton } from "./theme-toggle-button";
 
 type Page = {
   title: string;
@@ -12,7 +13,7 @@ const pages: Page[] = [
   { title: "Server", url: "/server/java/hypixel.net" },
 ];
 
-export default function NavBar() {
+export default function NavBar(): JSX.Element {
   return (
     <div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
       <div className="flex items-center gap-2 pl-3 pr-3">
@@ -27,8 +28,13 @@ export default function NavBar() {
 
       <div className="flex-grow"></div>
 
-      <div className="mr-4">
-        <RedirectButton title="Star us on Github!" url="https://github.com/RealFascinated/minecraft-helper" />
+      <div className="mr-4 flex items-center gap-2">
+        <RedirectButton
+          title="Star us on Github!"
+          url="https://github.com/RealFascinated/minecraft-helper"
+          openInNewTab
+        />
+        <ToggleThemeButton />
       </div>
     </div>
   );

src/app/components/not-found.tsx

@@ -2,7 +2,7 @@ type NotFoundProps = {
   message: string;
 };
 
-export function NotFound({ message }: NotFoundProps) {
+export function NotFound({ message }: NotFoundProps): JSX.Element {
   return (
     <div className="flex flex-col justify-center text-center">
       <h1 className="text-xl text-red-400">Not Found</h1>

src/app/components/player/lookup-player.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 
-export function LookupPlayer() {
+export function LookupPlayer(): JSX.Element {
   const router = useRouter();
   const [player, setPlayer] = useState("");
 

src/app/components/rediect-button.tsx

@@ -3,12 +3,13 @@ import Link from "next/link";
 type ButtonProps = {
   title: string;
   url: string;
+  openInNewTab?: boolean;
 };
 
-export function RedirectButton({ title, url }: ButtonProps) {
+export function RedirectButton({ title, url, openInNewTab }: ButtonProps): JSX.Element {
   return (
     <div className="w-fit rounded-lg">
-      <Link href={url} target="_blank">
+      <Link href={url} target={openInNewTab ? "_blank" : ""}>
         <p className="hover:text-primary transition-all">{title}</p>
       </Link>
     </div>

src/app/components/server/lookup-server.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 
-export function LookupServer() {
+export function LookupServer(): JSX.Element {
   const router = useRouter();
   const [hostname, setHostname] = useState("");
 

src/app/components/theme-provider.tsx

@@ -3,6 +3,6 @@
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
 
-export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export default function ThemeProvider({ children, ...props }: ThemeProviderProps): JSX.Element {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }

src/app/components/theme-toggle-button.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { MoonIcon } from "./icon/moon-icon";
+import { SunIcon } from "./icon/sun-icon";
+
+export function ToggleThemeButton(): JSX.Element {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <button className="p-2 rounded-lg" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+      {theme === "dark" ? <SunIcon /> : <MoonIcon color="#000" />}
+    </button>
+  );
+}