add with overlays skin part image to the skin part view
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m5s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m5s
This commit is contained in:
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}>
|
||||
|
Loading…
Reference in New Issue
Block a user