tooltip and click for player head too
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
This commit is contained in:
parent
ec47715c44
commit
0c4a1ebda9
@ -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}'s {part}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -13,6 +13,7 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "../ui/dialog";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||
|
||||
type SkinPartImageProps = {
|
||||
/**
|
||||
@ -29,30 +30,46 @@ 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 (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
|
||||
</DialogTrigger>
|
||||
<DialogContent className="w-fit min-w-72 h-fit">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{playerName}'s {capitalizeFirstLetter(part)}
|
||||
</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" />
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Link href={url}>
|
||||
<Button>Open in new tab</Button>
|
||||
</Link>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<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}'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 ${partName}`} loading="lazy" />
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Link href={url}>
|
||||
<Button>Open in new tab</Button>
|
||||
</Link>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Click to view {playerName}'s {partName}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user