make skin part images clickable
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m14s

This commit is contained in:
Lee 2024-04-16 23:16:34 +01:00
parent a96a693d13
commit 897f202638
3 changed files with 13 additions and 10 deletions

@ -14,7 +14,7 @@
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"lucide-react": "^0.368.0", "lucide-react": "^0.368.0",
"mcutils-library": "^1.1.3", "mcutils-library": "^1.1.4",
"next": "14.2.1", "next": "14.2.1",
"next-themes": "^0.3.0", "next-themes": "^0.3.0",
"react": "^18", "react": "^18",

@ -21,8 +21,8 @@ dependencies:
specifier: ^0.368.0 specifier: ^0.368.0
version: 0.368.0(react@18.2.0) version: 0.368.0(react@18.2.0)
mcutils-library: mcutils-library:
specifier: ^1.1.3 specifier: ^1.1.4
version: 1.1.3(@babel/core@7.24.4)(@types/node@20.12.7) version: 1.1.4(@babel/core@7.24.4)(@types/node@20.12.7)
next: next:
specifier: 14.2.1 specifier: 14.2.1
version: 14.2.1(@babel/core@7.24.4)(react-dom@18.2.0)(react@18.2.0) version: 14.2.1(@babel/core@7.24.4)(react-dom@18.2.0)(react@18.2.0)
@ -3516,8 +3516,8 @@ packages:
tmpl: 1.0.5 tmpl: 1.0.5
dev: false dev: false
/mcutils-library@1.1.3(@babel/core@7.24.4)(@types/node@20.12.7): /mcutils-library@1.1.4(@babel/core@7.24.4)(@types/node@20.12.7):
resolution: {integrity: sha512-LqTV8dbzShhJBD6xdZCg8S1TK0JZT3PcwwIaOZMgYVAt6bzGX3vf9lVI1JTreIhha9KQgKXTwnXxVuiLsFyueA==} resolution: {integrity: sha512-+L2aTlQMiXXz5SUoe23YHMSjOq2EesS6c012mlhwdovIrICcTZ3fx2cCx4wpa8tXyW5boYHYWtIgJgQ720ebbw==}
dependencies: dependencies:
axios: 1.6.8 axios: 1.6.8
jest: 29.7.0(@types/node@20.12.7)(ts-node@10.9.2) jest: 29.7.0(@types/node@20.12.7)(ts-node@10.9.2)

@ -1,11 +1,13 @@
/* eslint-disable @next/next/no-img-element */
import { Card } from "@/app/components/card"; import { Card } from "@/app/components/card";
import { NotFound } from "@/app/components/not-found"; import { NotFound } from "@/app/components/not-found";
import { LookupPlayer } from "@/app/components/player/lookup-player"; import { LookupPlayer } from "@/app/components/player/lookup-player";
import { generateEmbed } from "@/common/embed"; import { generateEmbed } from "@/common/embed";
import { getPlayer } from "mcutils-library"; import { getPlayer } from "mcutils-library";
import { Player } from "mcutils-library/dist/types/player/player"; import { Player, SkinPart } from "mcutils-library/dist/types/player/player";
import { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
type Params = { type Params = {
params: { params: {
@ -79,11 +81,12 @@ export default async function Page({ params }: Params): Promise<JSX.Element> {
<p className="text-lg">Skin Parts</p> <p className="text-lg">Skin Parts</p>
<div className="flex gap-2"> <div className="flex gap-2">
{Object.entries(player.skin.parts) {Object.entries(player.skin.parts)
.filter((part) => part[0] !== "head") // Don't show the head part again .filter((part) => part[0] !== SkinPart.HEAD) // Don't show the head part again
.map(([key, value]) => { .map(([part, url]) => {
return ( return (
// eslint-disable-next-line @next/next/no-img-element <Link key={part} href={url} target="_blank">
<img className="h-[64px]" key={key} src={value} alt={`The player's ${key}`} loading="lazy" /> <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
</Link>
); );
})} })}
</div> </div>