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 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>
|
||||||
|
@ -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
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[] = [
|
const pages: Page[] = [
|
||||||
{ title: "Home", url: "/" },
|
|
||||||
{ title: "Player", url: "/player" },
|
{ title: "Player", url: "/player" },
|
||||||
{ title: "Server", url: "/server" },
|
{ title: "Server", url: "/server" },
|
||||||
];
|
];
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user