make skin part images clickable

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>