move json button and add json button to the server page
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s

This commit is contained in:
Lee 2024-04-18 09:11:19 +01:00
parent 57144c5c91
commit 2c80edb56a
3 changed files with 72 additions and 60 deletions

@ -23,7 +23,6 @@ export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps):
customStyle={{ customStyle={{
maxHeight: "600px", maxHeight: "600px",
backgroundColor: "hsl(var(--popover))", backgroundColor: "hsl(var(--popover))",
overflow: "hidden",
wordBreak: "break-all", wordBreak: "break-all",
borderRadius: rounded ? "0.75rem" : undefined, borderRadius: rounded ? "0.75rem" : undefined,
}} }}

@ -3,6 +3,7 @@ import { CachedPlayer, SkinPart } from "mcutils-library";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Card } from "../card"; import { Card } from "../card";
import { CodeDialog } from "../code-dialog"; import { CodeDialog } from "../code-dialog";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator"; import { Separator } from "../ui/separator";
import { SkinPartImage } from "./skin-part-image"; import { SkinPartImage } from "./skin-part-image";
@ -15,44 +16,43 @@ type PlayerViewProps = {
export function PlayerView({ player }: PlayerViewProps): ReactElement { export function PlayerView({ player }: PlayerViewProps): ReactElement {
return ( return (
<Card className="w-max xs:w-fit"> <div className="flex flex-col gap-2">
<div className="flex gap-4 flex-col xs:flex-row relative"> <Card className="w-max xs:w-fit">
<div className="absolute 8xl:top-0 xs:bottom-0"> <div className="flex gap-4 flex-col xs:flex-row relative">
<CodeDialog <div className="flex items-center flex-col">
title="Player Data" <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
description="The player's data from the API"
code={JSON.stringify(player, undefined, 2)}
>
<button className="bg-background rounded-lg">
<p className="p-1">JSON</p>
</button>
</CodeDialog>
</div>
<div className="flex items-center flex-col">
<SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
</div>
<div className="flex flex-col gap-2">
<div>
<h2 className="text-xl text-primary font-semibold">{player.username}</h2>
<p>{player.uniqueId}</p>
</div> </div>
<Separator />
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<p className="text-lg">Skin Parts</p> <div>
<div className="flex gap-2"> <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
{Object.entries(player.skin.parts) <p>{player.uniqueId}</p>
.filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again </div>
.map(([part, url]) => {
return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />; <Separator />
})}
<div className="flex flex-col gap-2">
<p className="text-lg">Skin Parts</p>
<div className="flex gap-2">
{Object.entries(player.skin.parts)
.filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
.map(([part, url]) => {
return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
})}
</div>
</div> </div>
</div> </div>
</div> </div>
</Card>
<div className="8xl:top-0 xs:bottom-0">
<CodeDialog
title="Player Data"
description="The player's data from the API"
code={JSON.stringify(player, undefined, 2)}
>
<Button>View as JSON</Button>
</CodeDialog>
</div> </div>
</Card> </div>
); );
} }

@ -3,6 +3,8 @@ import { CachedBedrockMinecraftServer, CachedJavaMinecraftServer } from "mcutils
import Image from "next/image"; import Image from "next/image";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Card } from "../card"; import { Card } from "../card";
import { CodeDialog } from "../code-dialog";
import { Button } from "../ui/button";
type ServerViewProps = { type ServerViewProps = {
/** /**
@ -18,38 +20,49 @@ type ServerViewProps = {
export function ServerView({ server, favicon }: ServerViewProps): ReactElement { export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
return ( return (
<Card className="w-max xs:w-fit relative"> <div className="flex flex-col gap-2">
<div className="flex gap-2 flex-col"> <Card className="w-max xs:w-fit relative">
<div className="flex gap-4 flex-col xs:flex-row"> <div className="flex gap-2 flex-col">
{favicon && ( <div className="flex gap-4 flex-col xs:flex-row">
<div className="flex justify-center xs:justify-start"> {favicon && (
<Image <div className="flex justify-center xs:justify-start">
className="w-[64px] h-[64px]" <Image
src={favicon} className="w-[64px] h-[64px]"
width={64} src={favicon}
height={64} width={64}
quality={100} height={64}
alt="The server's favicon" quality={100}
/> alt="The server's favicon"
</div> />
)} </div>
)}
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="text-xl text-primary font-semibold">{server.hostname}</h2> <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
<div> <div>
<p> <p>
Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)} Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
</p> </p>
</div>
</div> </div>
</div> </div>
</div>
<div className="bg-background rounded-lg p-2 text-sm xs:text-lg"> <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
{server.motd.html.map((line, index) => { {server.motd.html.map((line, index) => {
return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>; return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
})} })}
</div>
</div> </div>
</Card>
<div className="8xl:top-0 xs:bottom-0">
<CodeDialog
title="Server Data"
description="The server's data from the API"
code={JSON.stringify(server, undefined, 2)}
>
<Button>View as JSON</Button>
</CodeDialog>
</div> </div>
</Card> </div>
); );
} }