From 897f2026389a9d788bc389b8146c570c76f3b3fb Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Tue, 16 Apr 2024 23:16:34 +0100
Subject: [PATCH] make skin part images clickable

---
 package.json                         |  2 +-
 pnpm-lock.yaml                       |  8 ++++----
 src/app/(pages)/player/[id]/page.tsx | 13 ++++++++-----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index d722dea..50f0d69 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.368.0",
-    "mcutils-library": "^1.1.3",
+    "mcutils-library": "^1.1.4",
     "next": "14.2.1",
     "next-themes": "^0.3.0",
     "react": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2aa7acc..68ba2a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ dependencies:
     specifier: ^0.368.0
     version: 0.368.0(react@18.2.0)
   mcutils-library:
-    specifier: ^1.1.3
-    version: 1.1.3(@babel/core@7.24.4)(@types/node@20.12.7)
+    specifier: ^1.1.4
+    version: 1.1.4(@babel/core@7.24.4)(@types/node@20.12.7)
   next:
     specifier: 14.2.1
     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
     dev: false
 
-  /mcutils-library@1.1.3(@babel/core@7.24.4)(@types/node@20.12.7):
-    resolution: {integrity: sha512-LqTV8dbzShhJBD6xdZCg8S1TK0JZT3PcwwIaOZMgYVAt6bzGX3vf9lVI1JTreIhha9KQgKXTwnXxVuiLsFyueA==}
+  /mcutils-library@1.1.4(@babel/core@7.24.4)(@types/node@20.12.7):
+    resolution: {integrity: sha512-+L2aTlQMiXXz5SUoe23YHMSjOq2EesS6c012mlhwdovIrICcTZ3fx2cCx4wpa8tXyW5boYHYWtIgJgQ720ebbw==}
     dependencies:
       axios: 1.6.8
       jest: 29.7.0(@types/node@20.12.7)(ts-node@10.9.2)
diff --git a/src/app/(pages)/player/[id]/page.tsx b/src/app/(pages)/player/[id]/page.tsx
index 3e72b19..caaa022 100644
--- a/src/app/(pages)/player/[id]/page.tsx
+++ b/src/app/(pages)/player/[id]/page.tsx
@@ -1,11 +1,13 @@
+/* eslint-disable @next/next/no-img-element */
 import { Card } from "@/app/components/card";
 import { NotFound } from "@/app/components/not-found";
 import { LookupPlayer } from "@/app/components/player/lookup-player";
 import { generateEmbed } from "@/common/embed";
 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 Image from "next/image";
+import Link from "next/link";
 
 type Params = {
   params: {
@@ -79,11 +81,12 @@ export default async function Page({ params }: Params): Promise<JSX.Element> {
                 <p className="text-lg">Skin Parts</p>
                 <div className="flex gap-2">
                   {Object.entries(player.skin.parts)
-                    .filter((part) => part[0] !== "head") // Don't show the head part again
-                    .map(([key, value]) => {
+                    .filter((part) => part[0] !== SkinPart.HEAD) // Don't show the head part again
+                    .map(([part, url]) => {
                       return (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img className="h-[64px]" key={key} src={value} alt={`The player's ${key}`} loading="lazy" />
+                        <Link key={part} href={url} target="_blank">
+                          <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
+                        </Link>
                       );
                     })}
                 </div>