MinecraftUtilities/Frontend
2
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Activity

cleanup and add mobile support
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 54s
Details

Browse Source
This commit is contained in:
Lee 2024-04-15 12:12:24 +01:00
parent a8cf19ba00
commit c054a31008
7 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/layout.tsx
View File

@ -1,15 +1,13 @@
import { Fonts } from "@/common/fonts";
import Container from "@/components/container";
import ThemeProvider from "@/components/theme-provider";
import { Metadata, Viewport } from "next";
import { ToastContainer } from "react-toastify";
import Config from "../../config.json";
import { Inter } from "next/font/google";
import "react-toastify/dist/ReactToastify.css";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
import Config from "../../config.json";
export const viewport: Viewport = {
themeColor: "#3498DB",
@ -39,7 +37,7 @@ export default function RootLayout({
}>) {
return (
<>
<html className={inter.className} lang="en" suppressHydrationWarning>
<html className={Fonts.inter.className} lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>

2
src/app/page.tsx
View File

@ -13,7 +13,7 @@ const buttons: Button[] = [
export default function Home() {
return (
<div className="text-center flex flex-col justify-center">
<h1 className="text-4xl mb-1">Minecraft Utilities</h1>
<h1 className="text-4xl mb-2">Minecraft Utilities</h1>
<div className="text-lg">
<p>Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.</p>
<p>

7
src/common/fonts.ts Normal file
View File

@ -0,0 +1,7 @@
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const Fonts = {
inter: inter,
};

1
src/components/navbar.tsx
View File

@ -7,7 +7,6 @@ type Page = {
};
const pages: Page[] = [
{ title: "Home", url: "/" },
{ title: "Player", url: "/player" },
{ title: "Server", url: "/server" },
];

47
src/components/player-search.tsx
View File

@ -1,6 +1,7 @@
"use client";
import { getPlayer } from "mcutils-library";
import { Player } from "mcutils-library/dist/types/player/player";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
@ -13,7 +14,7 @@ const defaultPlayerId = "Notch";
export default function PlayerSearch() {
const [playerId, setPlayerId] = useState<string>(defaultPlayerId);
const [player, setPlayer] = useState<any | null>(null);
const [player, setPlayer] = useState<Player | null>(null);
const handleLookup = async () => {
if (playerId === null || playerId.length <= 0) {
@ -52,26 +53,30 @@ export default function PlayerSearch() {
{player && (
<Card>
<Image src={player.skin.parts.head} alt="The player's Head" width={150} height={150} />
<div className="flex flex-col gap-1 mt-2">
<p>
Unique ID: <span className="font-bold">{player.uniqueId}</span>
</p>
<p>
Name: <span className="font-bold">{player.username}</span>
</p>
<div className="mt-2">
<p>Skin Parts</p>
<div className="flex gap-2">
{Object.keys(player.skin.parts).map((part: any, index: number) => {
return (
<p key={index}>
<Link className="text-primary" href={player.skin.parts[part]} target="_blank">
{part}
</Link>
</p>
);
})}
<div className="w-full flex flex-col md:flex-row gap-2">
<div className="flex justify-center">
<Image src={player.skin.parts.head} alt="The player's Head" width={150} height={150} />
</div>
<div className="flex flex-col gap-1 mt-2">
<p>
UUID: <span className="font-bold">{player.uniqueId}</span>
</p>
<p>
Name: <span className="font-bold">{player.username}</span>
</p>
<div className="mt-2">
<p>Skin Parts</p>
<div className="flex gap-2">
{Object.keys(player.skin.parts).map((part: any, index: number) => {
return (
<p key={index}>
<Link className="text-primary" href={player.skin.parts[part]} target="_blank">
{part}
</Link>
</p>
);
})}
</div>
</div>
</div>
</div>

30
src/components/server-search.tsx
View File

@ -53,22 +53,26 @@ export default function ServerSearch() {
{server && (
<Card>
<div className="flex flex-row gap-3 items-center">
<Image src={server.favicon.url} alt="The server's Icon" width={64} height={64} />
<div className="w-full flex flex-col gap-2">
<div className="flex flex-col md:flex-row gap-2">
<div className="flex justify-center">
<Image src={server.favicon.url} alt="The server's Favicon" width={64} height={64} />
</div>
<div className={cn("flex flex-col gap-2")}>
{server.motd.html.map((line, index) => {
return <div key={index} dangerouslySetInnerHTML={{ __html: line }} />;
})}
<div className={cn("flex flex-col gap-2")}>
{server.motd.html.map((line, index) => {
return <div key={index} dangerouslySetInnerHTML={{ __html: line }} />;
})}
</div>
</div>
</div>
<div className="flex flex-col gap-1">
<div>
<span className="font-bold">Host:</span> {server.hostname}
</div>
<div>
<span className="font-bold">Players:</span> {server.players.online}/{server.players.max}
<div className="flex flex-col gap-1">
<div>
<span className="font-bold">Host:</span> {server.hostname}
</div>
<div>
<span className="font-bold">Players:</span> {server.players.online}/{server.players.max}
</div>
</div>
</div>
</Card>

2
src/components/ui/card.tsx
View File

@ -3,5 +3,5 @@ export function Card({
}: Readonly<{
children: React.ReactNode;
}>) {
return <div className="bg-secondary rounded-lg p-4 min-w-[600px] max-w-full flex flex-row gap-2">{children}</div>;
return <div className="bg-secondary rounded-lg p-4 w-full">{children}</div>;
}