add dialog to skin parts
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m5s

This commit is contained in:
Lee 2024-04-18 07:46:22 +01:00
parent ff017c6bad
commit ec47715c44
4 changed files with 64 additions and 8 deletions

@ -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" : ""}>

@ -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

@ -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>

@ -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>
);
}