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 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" },
];

9
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,10 +53,13 @@ export default function PlayerSearch() {
{player && (
<Card>
<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>
Unique ID: <span className="font-bold">{player.uniqueId}</span>
UUID: <span className="font-bold">{player.uniqueId}</span>
</p>
<p>
Name: <span className="font-bold">{player.username}</span>
@ -75,6 +79,7 @@ export default function PlayerSearch() {
</div>
</div>
</div>
</div>
</Card>
)}
</div>

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

@ -53,8 +53,11 @@ 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) => {
@ -71,6 +74,7 @@ export default function ServerSearch() {
<span className="font-bold">Players:</span> {server.players.online}/{server.players.max}
</div>
</div>
</div>
</Card>
)}
</div>

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>;
}