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

tooltip and click for player head too
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
Details

Browse Source
This commit is contained in:
Lee 2024-04-18 07:55:50 +01:00
parent ec47715c44
commit 0c4a1ebda9
2 changed files with 42 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/components/player/player-view.tsx
View File

@ -1,11 +1,9 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import { CachedPlayer, SkinPart } from "mcutils-library"; import { CachedPlayer, SkinPart } from "mcutils-library";
import Image from "next/image";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Card } from "../card"; import { Card } from "../card";
import { CodeDialog } from "../code-dialog"; import { CodeDialog } from "../code-dialog";
import { Separator } from "../ui/separator"; import { Separator } from "../ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { SkinPartImage } from "./skin-part-image"; import { SkinPartImage } from "./skin-part-image";
type PlayerViewProps = { type PlayerViewProps = {
@ -31,15 +29,8 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
</CodeDialog> </CodeDialog>
</div> </div>
<div className="flex justify-center xs:justify-start"> <div>
<Image <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
className="w-[96px] h-[96px]"
src={player.skin.parts.head}
width={96}
height={96}
quality={100}
alt="The player's skin"
/>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@ -56,18 +47,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
{Object.entries(player.skin.parts) {Object.entries(player.skin.parts)
.filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
.map(([part, url]) => { .map(([part, url]) => {
return ( return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
<Tooltip key={part}>
<TooltipTrigger>
<SkinPartImage playerName={player.username} part={part as SkinPart} url={url} />
</TooltipTrigger>
<TooltipContent>
<p>
Click to view {player.username}&apos;s {part}
</p>
</TooltipContent>
</Tooltip>
);
})} })}
</div> </div>
</div> </div>

25
src/app/components/player/skin-part-image.tsx
View File

@ -13,6 +13,7 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../ui/dialog"; } from "../ui/dialog";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
type SkinPartImageProps = { type SkinPartImageProps = {
/** /**
@ -29,23 +30,32 @@ type SkinPartImageProps = {
* The URL to the skin part. * The URL to the skin part.
*/ */
url: string; url: string;
/**
* The size to display the skin part.
*/
size?: number;
}; };
export function SkinPartImage({ playerName, part, url }: SkinPartImageProps): ReactElement { export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImageProps): ReactElement {
const partName = capitalizeFirstLetter(part);
return ( return (
<Tooltip>
<TooltipTrigger>
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" /> <img className={`h-[${size}px]`} src={url} alt={`The player's ${part}`} loading="lazy" />
</DialogTrigger> </DialogTrigger>
<DialogContent className="w-fit min-w-72 h-fit"> <DialogContent className="w-fit min-w-72 h-fit">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{playerName}&apos;s {capitalizeFirstLetter(part)} {playerName}&apos;s {partName}
</DialogTitle> </DialogTitle>
<DialogDescription>See the skin part below.</DialogDescription> <DialogDescription>See the skin part below.</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex items-center flex-col w-full"> <div className="flex items-center flex-col w-full">
<img className="h-[256px]" src={url} alt={`The player's ${part}`} loading="lazy" /> <img className="h-[256px]" src={url} alt={`The player's ${partName}`} loading="lazy" />
</div> </div>
<DialogFooter> <DialogFooter>
<Link href={url}> <Link href={url}>
@ -54,5 +64,12 @@ export function SkinPartImage({ playerName, part, url }: SkinPartImageProps): Re
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</TooltipTrigger>
<TooltipContent>
<p>
Click to view {playerName}&apos;s {partName}
</p>
</TooltipContent>
</Tooltip>
); );
} }