add dialog to skin parts

src/app/components/href-button.tsx

@@ -19,7 +19,7 @@ type ButtonProps = {
   openInNewTab?: boolean;
 };
 
-export function RedirectButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
+export function HrefButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
   return (
     <div className="w-fit rounded-lg">
       <Link href={url} target={openInNewTab ? "_blank" : ""}>

src/app/components/navbar.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { ReactElement } from "react";
+import { HrefButton } from "./href-button";
 import Logo from "./logo";
-import { RedirectButton } from "./rediect-button";
 import { ToggleThemeButton } from "./theme-toggle-button";
 
 type Page = {
@@ -41,7 +41,7 @@ export default function NavBar(): ReactElement {
 
       <div className="flex gap-4">
         {pages.map((page, index) => {
-          return <RedirectButton key={index} title={page.name} url={page.url} openInNewTab={page.openInNewTab} />;
+          return <HrefButton key={index} title={page.name} url={page.url} openInNewTab={page.openInNewTab} />;
         })}
       </div>
 
@@ -49,7 +49,7 @@ export default function NavBar(): ReactElement {
 
       <div className="mr-4 flex items-center gap-2">
         <div className="hidden md:block">
-          <RedirectButton
+          <HrefButton
             title="Star us on Github!"
             url="https://github.com/RealFascinated/minecraft-helper"
             openInNewTab

src/app/components/player/player-view.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 import { CachedPlayer, SkinPart } from "mcutils-library";
 import Image from "next/image";
-import Link from "next/link";
 import { ReactElement } from "react";
 import { Card } from "../card";
 import { CodeDialog } from "../code-dialog";
 import { Separator } from "../ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { SkinPartImage } from "./skin-part-image";
 
 type PlayerViewProps = {
   /**
@@ -59,9 +59,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
                   return (
                     <Tooltip key={part}>
                       <TooltipTrigger>
-                        <Link href={url} target="_blank">
+                        <SkinPartImage playerName={player.username} part={part as SkinPart} url={url} />
-                          <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-                        </Link>
                       </TooltipTrigger>
                       <TooltipContent>
                         <p>

src/app/components/player/skin-part-image.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable @next/next/no-img-element */
+import { capitalizeFirstLetter } from "@/common/string-utils";
+import { SkinPart } from "mcutils-library";
+import Link from "next/link";
+import { ReactElement } from "react";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+
+type SkinPartImageProps = {
+  /**
+   * The player's name.
+   */
+  playerName: string;
+
+  /**
+   * The skin part.
+   */
+  part: SkinPart;
+
+  /**
+   * The URL to the skin part.
+   */
+  url: string;
+};
+
+export function SkinPartImage({ playerName, part, url }: SkinPartImageProps): ReactElement {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
+      </DialogTrigger>
+      <DialogContent className="w-fit min-w-72 h-fit">
+        <DialogHeader>
+          <DialogTitle>
+            {playerName}&apos;s {capitalizeFirstLetter(part)}
+          </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 ${part}`} loading="lazy" />
+        </div>
+        <DialogFooter>
+          <Link href={url}>
+            <Button>Open in new tab</Button>
+          </Link>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}