MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

add context menu to server and player
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 2m2s
Details

Browse Source
This commit is contained in:
Lee
2024-04-18 02:07:02 +01:00
parent 6f0b3ec252
commit 3ebc3c0612
6 changed files with 604 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
View File

@ -1,6 +1,8 @@
import { Card } from "@/app/components/card";
import { CopyButton } from "@/app/components/copy-button";
import { ErrorCard } from "@/app/components/error-card";
import { LookupServer } from "@/app/components/server/lookup-server";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
import { generateEmbed } from "@/common/embed";
import { formatNumber } from "@/common/number-utils";
import { capitalizeFirstLetter } from "@/common/string-utils";
@ -118,39 +120,53 @@ export default async function Page({ params: { platform, hostname } }: Params):
{error && <ErrorCard message={error} />}
{server != null && (
<Card className="w-max xs:w-fit">
<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>
)}
<ContextMenu>
<ContextMenuTrigger>
<Card className="w-max xs:w-fit">
<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 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>
</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>
</div>
</Card>
</Card>
</ContextMenuTrigger>
<ContextMenuContent className="flex flex-col">
<CopyButton content={server.hostname}>
<ContextMenuItem>Copy Server Hostname</ContextMenuItem>
</CopyButton>
{favicon && (
<CopyButton content={favicon}>
<ContextMenuItem>Copy Server Favicon URL</ContextMenuItem>
</CopyButton>
)}
</ContextMenuContent>
</ContextMenu>
)}
</div>
);