MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues 1 Pull Requests 10 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 */
import { CachedPlayer, SkinPart } from "mcutils-library";
import Image from "next/image";
import { ReactElement } from "react";
import { Card } from "../card";
import { CodeDialog } from "../code-dialog";
import { Separator } from "../ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { SkinPartImage } from "./skin-part-image";
type PlayerViewProps = {
@ -31,15 +29,8 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
</CodeDialog>
</div>
<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>
<SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
</div>
<div className="flex flex-col gap-2">
@ -56,18 +47,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
{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>
<SkinPartImage playerName={player.username} part={part as SkinPart} url={url} />
</TooltipTrigger>
<TooltipContent>
<p>
Click to view {player.username}&apos;s {part}
</p>
</TooltipContent>
</Tooltip>
);
return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
})}
</div>
</div>

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

@ -13,6 +13,7 @@ import {
DialogTitle,
DialogTrigger,
} from "../ui/dialog";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
type SkinPartImageProps = {
/**
@ -29,23 +30,32 @@ type SkinPartImageProps = {
* The URL to the skin part.
*/
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 (
<Tooltip>
<TooltipTrigger>
<Dialog>
<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>
<DialogContent className="w-fit min-w-72 h-fit">
<DialogHeader>
<DialogTitle>
{playerName}&apos;s {capitalizeFirstLetter(part)}
{playerName}&apos;s {partName}
</DialogTitle>
<DialogDescription>See the skin part below.</DialogDescription>
</DialogHeader>
<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>
<DialogFooter>
<Link href={url}>
@ -54,5 +64,12 @@ export function SkinPartImage({ playerName, part, url }: SkinPartImageProps): Re
</DialogFooter>
</DialogContent>
</Dialog>
</TooltipTrigger>
<TooltipContent>
<p>
Click to view {playerName}&apos;s {partName}
</p>
</TooltipContent>
</Tooltip>
);
}