2024-04-17 21:04:33 -07:00
|
|
|
import CopyButton from "@/components/copy-button";
|
2024-04-17 16:43:35 -07:00
|
|
|
import { Badge } from "@/components/ui/badge";
|
2024-04-17 17:37:49 -07:00
|
|
|
import {
|
|
|
|
ContextMenu,
|
|
|
|
ContextMenuContent,
|
|
|
|
ContextMenuItem,
|
|
|
|
ContextMenuTrigger,
|
|
|
|
} from "@/components/ui/context-menu";
|
2024-04-17 21:04:33 -07:00
|
|
|
import config from "@/config";
|
|
|
|
import Image from "next/image";
|
|
|
|
import Link from "next/link";
|
|
|
|
import { ReactElement } from "react";
|
|
|
|
import { CachedPlayer, SkinPart } from "restfulmc-lib";
|
2024-04-17 17:47:45 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The props for a player result.
|
|
|
|
*/
|
|
|
|
type PlayerResultProps = {
|
|
|
|
/**
|
|
|
|
* The original query to lookup this player.
|
|
|
|
*/
|
|
|
|
query: string | undefined;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The result of a search.
|
|
|
|
*/
|
|
|
|
player: CachedPlayer;
|
|
|
|
};
|
2024-04-16 15:27:56 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The result of a player search.
|
|
|
|
*
|
|
|
|
* @param player the player to display
|
|
|
|
* @returns the player result jsx
|
|
|
|
*/
|
|
|
|
const PlayerResult = ({
|
2024-04-17 17:37:49 -07:00
|
|
|
query,
|
2024-04-17 16:04:15 -07:00
|
|
|
player: {
|
|
|
|
uniqueId,
|
|
|
|
username,
|
|
|
|
skin: { parts },
|
|
|
|
legacy,
|
|
|
|
},
|
2024-04-17 17:47:45 -07:00
|
|
|
}: PlayerResultProps): ReactElement => (
|
2024-04-17 17:37:49 -07:00
|
|
|
<ContextMenu>
|
|
|
|
<ContextMenuTrigger>
|
2024-04-18 13:34:42 -07:00
|
|
|
<div className="relative px-2 py-7 flex flex-col items-center bg-muted rounded-xl">
|
2024-04-17 17:37:49 -07:00
|
|
|
{/* Raw Json */}
|
2024-04-18 13:34:42 -07:00
|
|
|
<div className="absolute top-2 right-2">
|
2024-04-17 17:37:49 -07:00
|
|
|
<Link
|
|
|
|
href={`${config.apiEndpoint}/player/${username}`}
|
|
|
|
target="_blank"
|
|
|
|
>
|
|
|
|
<Badge className="bg-minecraft-green-2 hover:bg-minecraft-green-2 hover:opacity-85 text-white font-semibold uppercase transition-all transform-gpu">
|
|
|
|
Raw Json
|
|
|
|
</Badge>
|
|
|
|
</Link>
|
|
|
|
</div>
|
2024-04-16 15:27:56 -07:00
|
|
|
|
2024-04-17 17:37:49 -07:00
|
|
|
<div className="w-full flex flex-col gap-3 justify-center items-center divide-y divide-zinc-700">
|
|
|
|
{/* Details */}
|
|
|
|
<div className="flex gap-5 items-center">
|
|
|
|
{/* Player Head */}
|
|
|
|
<Image
|
|
|
|
className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
|
|
|
|
src={parts.HEAD}
|
|
|
|
alt={`${username}'s Head`}
|
|
|
|
width={128}
|
|
|
|
height={128}
|
|
|
|
/>
|
2024-04-16 17:23:09 -07:00
|
|
|
|
2024-04-17 17:37:49 -07:00
|
|
|
{/* Name, Unique ID, and Badges */}
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
|
|
<h1 className="text-xl font-bold text-minecraft-green-3">
|
|
|
|
{username}
|
|
|
|
</h1>
|
|
|
|
<code className="text-xs xs:text-sm text-zinc-300">
|
|
|
|
{uniqueId}
|
|
|
|
</code>
|
2024-04-16 15:27:56 -07:00
|
|
|
|
2024-04-17 17:37:49 -07:00
|
|
|
{/* Legacy Badge */}
|
|
|
|
{legacy && (
|
|
|
|
<p className="text-sm font-semibold uppercase">
|
|
|
|
Legacy
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-04-16 15:27:56 -07:00
|
|
|
|
2024-04-17 17:37:49 -07:00
|
|
|
{/* Skin Parts */}
|
|
|
|
<div className="pt-3 w-[90%] flex flex-col gap-3">
|
|
|
|
{/* Header */}
|
|
|
|
<h1 className="font-semibold uppercase">Skin Parts</h1>
|
2024-04-17 16:43:35 -07:00
|
|
|
|
2024-04-17 17:37:49 -07:00
|
|
|
{/* Skin Parts */}
|
|
|
|
<div className="flex gap-5">
|
|
|
|
{Object.entries(parts)
|
|
|
|
.filter(
|
|
|
|
([part]) =>
|
|
|
|
part === SkinPart.HEAD ||
|
|
|
|
part === SkinPart.FACE ||
|
|
|
|
part === SkinPart.BODY_FLAT
|
|
|
|
)
|
|
|
|
.map(([part, url], index) => (
|
|
|
|
<Link
|
|
|
|
key={index}
|
|
|
|
href={url}
|
|
|
|
target="_blank"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
|
|
|
|
src={url}
|
|
|
|
alt={`${username}'s ${part}`}
|
|
|
|
/>
|
|
|
|
</Link>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-04-17 16:43:35 -07:00
|
|
|
</div>
|
2024-04-17 16:04:15 -07:00
|
|
|
</div>
|
2024-04-17 17:37:49 -07:00
|
|
|
</ContextMenuTrigger>
|
2024-04-17 17:54:15 -07:00
|
|
|
<ContextMenuContent className="flex flex-col">
|
2024-04-17 21:04:33 -07:00
|
|
|
<CopyButton content={username} showToast>
|
2024-04-17 17:54:15 -07:00
|
|
|
<ContextMenuItem>Copy Player Username</ContextMenuItem>
|
|
|
|
</CopyButton>
|
|
|
|
|
2024-04-17 21:04:33 -07:00
|
|
|
<CopyButton content={uniqueId} showToast>
|
2024-04-17 17:54:15 -07:00
|
|
|
<ContextMenuItem>Copy Player UUID</ContextMenuItem>
|
|
|
|
</CopyButton>
|
|
|
|
|
2024-04-17 21:04:33 -07:00
|
|
|
<CopyButton content={`${config.siteUrl}/player/${query}`} showToast>
|
2024-04-17 17:54:15 -07:00
|
|
|
<ContextMenuItem>Copy Share URL</ContextMenuItem>
|
|
|
|
</CopyButton>
|
2024-04-17 17:37:49 -07:00
|
|
|
</ContextMenuContent>
|
|
|
|
</ContextMenu>
|
2024-04-16 15:27:56 -07:00
|
|
|
);
|
|
|
|
export default PlayerResult;
|