add dialog to skin parts
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m5s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m5s
This commit is contained in:
parent
ff017c6bad
commit
ec47715c44
@ -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>
|
||||
|
58
src/app/components/player/skin-part-image.tsx
Normal file
58
src/app/components/player/skin-part-image.tsx
Normal file
@ -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}'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>
|
||||
);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user