From e1ebccd5b7a9871b01d8357600396a9650ccfd33 Mon Sep 17 00:00:00 2001 From: Liam Date: Tue, 16 Apr 2024 21:50:08 +0100 Subject: [PATCH] fix motd on mobile and format the player counts --- src/app/(pages)/player/[id]/page.tsx | 4 ++-- src/app/(pages)/server/[platform]/[hostname]/page.tsx | 9 +++++---- src/app/components/container.tsx | 2 +- src/app/components/navbar.tsx | 4 ++-- src/app/components/player/lookup-player.tsx | 2 +- src/app/components/server/lookup-server.tsx | 10 ++++++---- src/common/number-utils.ts | 9 +++++++++ tailwind.config.ts | 7 ++++++- 8 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 src/common/number-utils.ts diff --git a/src/app/(pages)/player/[id]/page.tsx b/src/app/(pages)/player/[id]/page.tsx index 7365c3f..7742350 100644 --- a/src/app/(pages)/player/[id]/page.tsx +++ b/src/app/(pages)/player/[id]/page.tsx @@ -57,8 +57,8 @@ export default async function Page({ params }: Params): Promise { {player == null && } {player != null && ( -
-
+
+
} {server != null && (
-
+
{favicon && ( -
+
{server.hostname}

- Players online: {server.players.online}/{server.players.max} + Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}

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

; })} diff --git a/src/app/components/container.tsx b/src/app/components/container.tsx index 57458db..8e4269d 100644 --- a/src/app/components/container.tsx +++ b/src/app/components/container.tsx @@ -6,7 +6,7 @@ export default function Container({ children: React.ReactNode; }>): JSX.Element { return ( -
+
{children}
diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx index 3e752f5..8c60bcb 100644 --- a/src/app/components/navbar.tsx +++ b/src/app/components/navbar.tsx @@ -18,7 +18,7 @@ export default function NavBar(): JSX.Element {
- +

Minecraft Utilities

@@ -29,7 +29,7 @@ export default function NavBar(): JSX.Element {
-
+
- + diff --git a/src/app/components/server/lookup-server.tsx b/src/app/components/server/lookup-server.tsx index ccd0dc0..0f16609 100644 --- a/src/app/components/server/lookup-server.tsx +++ b/src/app/components/server/lookup-server.tsx @@ -32,10 +32,12 @@ export function LookupServer(): JSX.Element { }; return ( -
- - - + + +
+ + +
); } diff --git a/src/common/number-utils.ts b/src/common/number-utils.ts new file mode 100644 index 0000000..12e03aa --- /dev/null +++ b/src/common/number-utils.ts @@ -0,0 +1,9 @@ +/** + * Formats a number using the browser's locale + * + * @param number the number to format + * @returns the formatted number + */ +export function formatNumber(number: number): string { + return new Intl.NumberFormat().format(number); +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 5588001..f837f31 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,4 +1,5 @@ import type { Config } from "tailwindcss"; +import defaultTheme from "tailwindcss/defaultTheme"; const config = { darkMode: ["class"], @@ -9,10 +10,14 @@ const config = { center: true, padding: "2rem", screens: { - "2xl": "1400px", + xs: "475px", + ...defaultTheme.screens, }, }, extend: { + screens: { + xs: "475px", + }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))",