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

104
src/app/(pages)/player/[[...id]]/page.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable @next/next/no-img-element */
import { Card } from "@/app/components/card";
import { CopyButton } from "@/app/components/copy-button";
import { ErrorCard } from "@/app/components/error-card";
import { LookupPlayer } from "@/app/components/player/lookup-player";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
import { Separator } from "@/app/components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
import { generateEmbed } from "@/common/embed";
@ -10,6 +12,7 @@ import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ReactElement } from "react";
import config from "../../../../../config.json";
type Params = {
params: {
@ -69,53 +72,70 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
{error && <ErrorCard message={error} />}
{player != undefined && (
<Card className="w-max xs:w-fit">
<div className="flex gap-4 flex-col xs:flex-row">
<div className="flex justify-center xs:justify-start">
<Image
className="w-[96px] h-[96px]"
src={player.skin.parts.head}
width={96}
height={96}
quality={100}
alt="The player's skin"
/>
</div>
<ContextMenu>
<ContextMenuTrigger>
<Card className="w-max xs:w-fit">
<div className="flex gap-4 flex-col xs:flex-row">
<div className="flex justify-center xs:justify-start">
<Image
className="w-[96px] h-[96px]"
src={player.skin.parts.head}
width={96}
height={96}
quality={100}
alt="The player's skin"
/>
</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 className="flex flex-col gap-2">
<div>
<h2 className="text-xl text-primary font-semibold">{player.username}</h2>
<p>{player.uniqueId}</p>
</div>
<Separator />
<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 (
<Tooltip key={part}>
<TooltipTrigger>
<Link href={url} target="_blank">
<img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
</Link>
</TooltipTrigger>
<TooltipContent>
<p>
Click to view {player.username}&apos;s {part}
</p>
</TooltipContent>
</Tooltip>
);
})}
<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 (
<Tooltip key={part}>
<TooltipTrigger>
<Link href={url} target="_blank">
<img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
</Link>
</TooltipTrigger>
<TooltipContent>
<p>
Click to view {player.username}&apos;s {part}
</p>
</TooltipContent>
</Tooltip>
);
})}
</div>
</div>
</div>
</div>
</div>
</div>
</Card>
</Card>
</ContextMenuTrigger>
<ContextMenuContent className="flex flex-col">
<CopyButton content={player.username}>
<ContextMenuItem>Copy Player Username</ContextMenuItem>
</CopyButton>
<CopyButton content={player.uniqueId}>
<ContextMenuItem>Copy Player UUID</ContextMenuItem>
</CopyButton>
<CopyButton content={`${config.siteUrl}/player/${id}`}>
<ContextMenuItem>Copy Share URL</ContextMenuItem>
</CopyButton>
</ContextMenuContent>
</ContextMenu>
)}
</div>
);