move json button and add json button to the server page
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
This commit is contained in:
parent
57144c5c91
commit
2c80edb56a
@ -23,7 +23,6 @@ export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps):
|
||||
customStyle={{
|
||||
maxHeight: "600px",
|
||||
backgroundColor: "hsl(var(--popover))",
|
||||
overflow: "hidden",
|
||||
wordBreak: "break-all",
|
||||
borderRadius: rounded ? "0.75rem" : undefined,
|
||||
}}
|
||||
|
@ -3,6 +3,7 @@ import { CachedPlayer, SkinPart } from "mcutils-library";
|
||||
import { ReactElement } from "react";
|
||||
import { Card } from "../card";
|
||||
import { CodeDialog } from "../code-dialog";
|
||||
import { Button } from "../ui/button";
|
||||
import { Separator } from "../ui/separator";
|
||||
import { SkinPartImage } from "./skin-part-image";
|
||||
|
||||
@ -15,44 +16,43 @@ type PlayerViewProps = {
|
||||
|
||||
export function PlayerView({ player }: PlayerViewProps): ReactElement {
|
||||
return (
|
||||
<Card className="w-max xs:w-fit">
|
||||
<div className="flex gap-4 flex-col xs:flex-row relative">
|
||||
<div className="absolute 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 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 className="flex flex-col gap-2">
|
||||
<Card className="w-max xs:w-fit">
|
||||
<div className="flex gap-4 flex-col xs:flex-row relative">
|
||||
<div className="flex items-center flex-col">
|
||||
<SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h2 className="text-xl text-primary font-semibold">{player.username}</h2>
|
||||
<p>{player.uniqueId}</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -3,6 +3,8 @@ import { CachedBedrockMinecraftServer, CachedJavaMinecraftServer } from "mcutils
|
||||
import Image from "next/image";
|
||||
import { ReactElement } from "react";
|
||||
import { Card } from "../card";
|
||||
import { CodeDialog } from "../code-dialog";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
type ServerViewProps = {
|
||||
/**
|
||||
@ -18,38 +20,49 @@ type ServerViewProps = {
|
||||
|
||||
export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
|
||||
return (
|
||||
<Card className="w-max xs:w-fit relative">
|
||||
<div className="flex gap-2 flex-col">
|
||||
<div className="flex gap-4 flex-col xs:flex-row">
|
||||
{favicon && (
|
||||
<div className="flex justify-center xs:justify-start">
|
||||
<Image
|
||||
className="w-[64px] h-[64px]"
|
||||
src={favicon}
|
||||
width={64}
|
||||
height={64}
|
||||
quality={100}
|
||||
alt="The server's favicon"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
<Card className="w-max xs:w-fit relative">
|
||||
<div className="flex gap-2 flex-col">
|
||||
<div className="flex gap-4 flex-col xs:flex-row">
|
||||
{favicon && (
|
||||
<div className="flex justify-center xs:justify-start">
|
||||
<Image
|
||||
className="w-[64px] h-[64px]"
|
||||
src={favicon}
|
||||
width={64}
|
||||
height={64}
|
||||
quality={100}
|
||||
alt="The server's favicon"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
|
||||
<div>
|
||||
<p>
|
||||
Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
|
||||
</p>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
|
||||
<div>
|
||||
<p>
|
||||
Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
|
||||
{server.motd.html.map((line, index) => {
|
||||
return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
|
||||
})}
|
||||
<div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
|
||||
{server.motd.html.map((line, index) => {
|
||||
return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
|
||||
})}
|
||||
</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>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user