Rainnny7
132b3e0315
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m9s
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { CachedPlayer, SkinPart } from "restfulmc-lib";
|
|
|
|
/**
|
|
* The result of a player search.
|
|
*
|
|
* @param player the player to display
|
|
* @returns the player result jsx
|
|
*/
|
|
const PlayerResult = ({
|
|
player: {
|
|
uniqueId,
|
|
username,
|
|
skin: { parts },
|
|
legacy,
|
|
},
|
|
}: {
|
|
player: CachedPlayer;
|
|
}): JSX.Element => (
|
|
<div className="px-2 py-3 flex flex-col gap-3 items-center bg-muted rounded-xl 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}
|
|
/>
|
|
|
|
{/* 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>
|
|
|
|
{/* Legacy Badge */}
|
|
{legacy && <p className="text-sm font-semibold uppercase">Legacy</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Skin Parts */}
|
|
<div className="pt-3 w-[90%] flex flex-col gap-3">
|
|
{/* Header */}
|
|
<h1 className="font-semibold uppercase">Skin Parts</h1>
|
|
|
|
{/* 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>
|
|
</div>
|
|
);
|
|
export default PlayerResult;
|