add with overlays skin part image to the skin part view

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

@@ -37,6 +37,28 @@ type SkinPartImageProps = {
   size?: number;
 };
 
+type SkinOverlay = {
+  /**
+   * The title to display.
+   */
+  title: string;
+
+  /**
+   * Whether to show the part with overlays.
+   */
+  overlays?: boolean;
+};
+
+const skinPartOverlay: SkinOverlay[] = [
+  {
+    title: "Without Overlays",
+  },
+  {
+    title: "With Overlays",
+    overlays: true,
+  },
+];
+
 export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImageProps): ReactElement {
   const partName = capitalizeFirstLetter(part);
 
@@ -61,8 +83,20 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
               </DialogTitle>
               <DialogDescription>See the skin part below.</DialogDescription>
             </DialogHeader>
-            <div className="flex items-center flex-col w-full">
+            <div className="flex items-center flex-row w-full divide-x text-muted-foreground">
-              <img className="h-[256px]" src={url} alt={`The player's ${partName}`} loading="lazy" />
+              {skinPartOverlay.map((overlay, index) => {
+                return (
+                  <div key={index} className="p-2 text-center font-semibold flex flex-col gap-2">
+                    <p>{overlay.title}</p>
+                    <img
+                      className="h-[256px]"
+                      src={url + (overlay.overlays ? "?overlays=true" : "")}
+                      alt={`The player's ${partName}`}
+                      loading="lazy"
+                    />
+                  </div>
+                );
+              })}
             </div>
             <DialogFooter>
               <Link href={url}>