diff --git a/src/app/(pages)/layout.tsx b/src/app/(pages)/layout.tsx index 50fb6ac..4a51318 100644 --- a/src/app/(pages)/layout.tsx +++ b/src/app/(pages)/layout.tsx @@ -34,7 +34,7 @@ export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; -}>) { +}>): JSX.Element { return ( <> diff --git a/src/app/(pages)/page.tsx b/src/app/(pages)/page.tsx index 30370ee..be6e80d 100644 --- a/src/app/(pages)/page.tsx +++ b/src/app/(pages)/page.tsx @@ -10,7 +10,7 @@ const buttons: Button[] = [ { title: "Documentation", url: "https://api.mcutils.xyz/swagger-ui.html" }, ]; -export default function Home() { +export default function Home(): JSX.Element { return (

Minecraft Utilities

diff --git a/src/app/(pages)/player/[id]/page.tsx b/src/app/(pages)/player/[id]/page.tsx index 7841939..9c6ea8b 100644 --- a/src/app/(pages)/player/[id]/page.tsx +++ b/src/app/(pages)/player/[id]/page.tsx @@ -1,6 +1,6 @@ +import { Card } from "@/app/components/card"; import { NotFound } from "@/app/components/not-found"; import { LookupPlayer } from "@/app/components/player/lookup-player"; -import { Card } from "@/app/components/ui/card"; import { generateEmbed } from "@/common/embed"; import { getPlayer } from "mcutils-library"; import { Player } from "mcutils-library/dist/types/player/player"; @@ -42,7 +42,7 @@ async function getData(id: string): Promise { } } -export default async function Page({ params }: Params) { +export default async function Page({ params }: Params): Promise { const player = await getData(params.id); return ( @@ -57,7 +57,7 @@ export default async function Page({ params }: Params) { {player == null && } {player != null && ( -
+
{ const server = await getData(platform, hostname); let favicon = null; // Server favicon @@ -77,28 +77,36 @@ export default async function Page({ params: { platform, hostname } }: Params) { {server == null && } {server != null && ( -
- {favicon && ( -
- The server's favicon -
- )} +
+
+ {favicon && ( +
+ The server's favicon +
+ )} -
-

{server.hostname}

-
-

- Players online: {server.players.online}/{server.players.max} -

+
+

{server.hostname}

+
+

+ Players online: {server.players.online}/{server.players.max} +

+
+ +
+ {server.motd.html.map((line, index) => { + return

; + })} +
)} diff --git a/src/app/components/ui/card.tsx b/src/app/components/card.tsx similarity index 88% rename from src/app/components/ui/card.tsx rename to src/app/components/card.tsx index 75b8b54..b00e925 100644 --- a/src/app/components/ui/card.tsx +++ b/src/app/components/card.tsx @@ -2,6 +2,6 @@ export function Card({ children, }: Readonly<{ children: React.ReactNode; -}>) { +}>): JSX.Element { return
{children}
; } diff --git a/src/app/components/container.tsx b/src/app/components/container.tsx index fd2bacb..57458db 100644 --- a/src/app/components/container.tsx +++ b/src/app/components/container.tsx @@ -4,7 +4,7 @@ export default function Container({ children, }: Readonly<{ children: React.ReactNode; -}>) { +}>): JSX.Element { return (
diff --git a/src/app/components/icon/icon-props.ts b/src/app/components/icon/icon-props.ts new file mode 100644 index 0000000..e7791a8 --- /dev/null +++ b/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; +}; diff --git a/src/app/components/icon/moon-icon.tsx b/src/app/components/icon/moon-icon.tsx new file mode 100644 index 0000000..9b34a30 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/src/app/components/icon/sun-icon.tsx b/src/app/components/icon/sun-icon.tsx new file mode 100644 index 0000000..d0e24a6 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/src/app/components/logo.tsx b/src/app/components/logo.tsx index 671576a..bf602bd 100644 --- a/src/app/components/logo.tsx +++ b/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 (
@@ -27,8 +28,13 @@ export default function NavBar() {
-
- +
+ +
); diff --git a/src/app/components/not-found.tsx b/src/app/components/not-found.tsx index 43f8cc7..70e87e5 100644 --- a/src/app/components/not-found.tsx +++ b/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 (

Not Found

diff --git a/src/app/components/player/lookup-player.tsx b/src/app/components/player/lookup-player.tsx index 2d97a1e..4272121 100644 --- a/src/app/components/player/lookup-player.tsx +++ b/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(""); diff --git a/src/app/components/rediect-button.tsx b/src/app/components/rediect-button.tsx index 0c8002d..53079fb 100644 --- a/src/app/components/rediect-button.tsx +++ b/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 (
- +

{title}

diff --git a/src/app/components/server/lookup-server.tsx b/src/app/components/server/lookup-server.tsx index e2374c3..7d1e293 100644 --- a/src/app/components/server/lookup-server.tsx +++ b/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(""); diff --git a/src/app/components/theme-provider.tsx b/src/app/components/theme-provider.tsx index 9fd733b..fcd72ba 100644 --- a/src/app/components/theme-provider.tsx +++ b/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 {children}; } diff --git a/src/app/components/theme-toggle-button.tsx b/src/app/components/theme-toggle-button.tsx new file mode 100644 index 0000000..9caafe9 --- /dev/null +++ b/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 ( + + ); +}