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

2
src/app/page.tsx
View File

@ -13,7 +13,7 @@ const buttons: Button[] = [
export default function Home() { export default function Home() {
return ( return (
<div className="text-center flex flex-col justify-center"> <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"> <div className="text-lg">
<p>Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.</p> <p>Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.</p>
<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[] = [ const pages: Page[] = [
{ title: "Home", url: "/" },
{ title: "Player", url: "/player" }, { title: "Player", url: "/player" },
{ title: "Server", url: "/server" }, { title: "Server", url: "/server" },
]; ];

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

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

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

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

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

@ -3,5 +3,5 @@ export function Card({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; 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>;
} }