add with overlays skin part image to the skin part view
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m5s

This commit is contained in:
Lee 2024-04-18 08:14:09 +01:00
parent f9257bb184
commit 2c3b938765

@ -37,6 +37,28 @@ type SkinPartImageProps = {
size?: number;
};
type SkinOverlay = {
/**
* The title to display.
*/
title: string;
/**
* Whether to show the part with overlays.
*/
overlays?: boolean;
};
const skinPartOverlay: SkinOverlay[] = [
{
title: "Without Overlays",
},
{
title: "With Overlays",
overlays: true,
},
];
export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImageProps): ReactElement {
const partName = capitalizeFirstLetter(part);
@ -61,8 +83,20 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
</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 className="flex items-center flex-row w-full divide-x text-muted-foreground">
{skinPartOverlay.map((overlay, index) => {
return (
<div key={index} className="p-2 text-center font-semibold flex flex-col gap-2">
<p>{overlay.title}</p>
<img
className="h-[256px]"
src={url + (overlay.overlays ? "?overlays=true" : "")}
alt={`The player's ${partName}`}
loading="lazy"
/>
</div>
);
})}
</div>
<DialogFooter>
<Link href={url}>