cleanup and add mobile support
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 54s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 54s
This commit is contained in:
parent
a8cf19ba00
commit
c054a31008
@ -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>
|
||||
|
@ -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
7
src/common/fonts.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Inter } from "next/font/google";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const Fonts = {
|
||||
inter: inter,
|
||||
};
|
@ -7,7 +7,6 @@ type Page = {
|
||||
};
|
||||
|
||||
const pages: Page[] = [
|
||||
{ title: "Home", url: "/" },
|
||||
{ title: "Player", url: "/player" },
|
||||
{ title: "Server", url: "/server" },
|
||||
];
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user