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;
|
openInNewTab?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function RedirectButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
|
export function HrefButton({ title, url, openInNewTab }: ButtonProps): ReactElement {
|
||||||
return (
|
return (
|
||||||
<div className="w-fit rounded-lg">
|
<div className="w-fit rounded-lg">
|
||||||
<Link href={url} target={openInNewTab ? "_blank" : ""}>
|
<Link href={url} target={openInNewTab ? "_blank" : ""}>
|
@ -1,7 +1,7 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ReactElement } from "react";
|
import { ReactElement } from "react";
|
||||||
|
import { HrefButton } from "./href-button";
|
||||||
import Logo from "./logo";
|
import Logo from "./logo";
|
||||||
import { RedirectButton } from "./rediect-button";
|
|
||||||
import { ToggleThemeButton } from "./theme-toggle-button";
|
import { ToggleThemeButton } from "./theme-toggle-button";
|
||||||
|
|
||||||
type Page = {
|
type Page = {
|
||||||
@ -41,7 +41,7 @@ export default function NavBar(): ReactElement {
|
|||||||
|
|
||||||
<div className="flex gap-4">
|
<div className="flex gap-4">
|
||||||
{pages.map((page, index) => {
|
{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>
|
</div>
|
||||||
|
|
||||||
@ -49,7 +49,7 @@ export default function NavBar(): ReactElement {
|
|||||||
|
|
||||||
<div className="mr-4 flex items-center gap-2">
|
<div className="mr-4 flex items-center gap-2">
|
||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<RedirectButton
|
<HrefButton
|
||||||
title="Star us on Github!"
|
title="Star us on Github!"
|
||||||
url="https://github.com/RealFascinated/minecraft-helper"
|
url="https://github.com/RealFascinated/minecraft-helper"
|
||||||
openInNewTab
|
openInNewTab
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
import { CachedPlayer, SkinPart } from "mcutils-library";
|
import { CachedPlayer, SkinPart } from "mcutils-library";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
|
||||||
import { ReactElement } from "react";
|
import { ReactElement } from "react";
|
||||||
import { Card } from "../card";
|
import { Card } from "../card";
|
||||||
import { CodeDialog } from "../code-dialog";
|
import { CodeDialog } from "../code-dialog";
|
||||||
import { Separator } from "../ui/separator";
|
import { Separator } from "../ui/separator";
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||||
|
import { SkinPartImage } from "./skin-part-image";
|
||||||
|
|
||||||
type PlayerViewProps = {
|
type PlayerViewProps = {
|
||||||
/**
|
/**
|
||||||
@ -59,9 +59,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
|
|||||||
return (
|
return (
|
||||||
<Tooltip key={part}>
|
<Tooltip key={part}>
|
||||||
<TooltipTrigger>
|
<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>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
<p>
|
<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…
Reference in New Issue
Block a user