From ec47715c442321e107974f79745cd8814265cb7c Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 07:46:22 +0100
Subject: [PATCH] add dialog to skin parts

---
 .../{rediect-button.tsx => href-button.tsx}   |  2 +-
 src/app/components/navbar.tsx                 |  6 +-
 src/app/components/player/player-view.tsx     |  6 +-
 src/app/components/player/skin-part-image.tsx | 58 +++++++++++++++++++
 4 files changed, 64 insertions(+), 8 deletions(-)
 rename src/app/components/{rediect-button.tsx => href-button.tsx} (85%)
 create mode 100644 src/app/components/player/skin-part-image.tsx

diff --git a/src/app/components/rediect-button.tsx b/src/app/components/href-button.tsx
similarity index 85%
rename from src/app/components/rediect-button.tsx
rename to src/app/components/href-button.tsx
index 5c47f5b..e748239 100644
--- a/src/app/components/rediect-button.tsx
+++ b/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" : ""}>
diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx
index 0b7c80b..1ecf173 100644
--- a/src/app/components/navbar.tsx
+++ b/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
diff --git a/src/app/components/player/player-view.tsx b/src/app/components/player/player-view.tsx
index 1f7a48a..39c5212 100644
--- a/src/app/components/player/player-view.tsx
+++ b/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">
-                          <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-                        </Link>
+                        <SkinPartImage playerName={player.username} part={part as SkinPart} url={url} />
                       </TooltipTrigger>
                       <TooltipContent>
                         <p>
diff --git a/src/app/components/player/skin-part-image.tsx b/src/app/components/player/skin-part-image.tsx
new file mode 100644
index 0000000..2f2e938
--- /dev/null
+++ b/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>
+  );
+}