add a title component
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s

This commit is contained in:
Lee 2024-04-19 22:08:20 +01:00
parent 78390a3bc9
commit 1ed0e72316
9 changed files with 60 additions and 34 deletions

@ -7,6 +7,7 @@ import { Metadata, Viewport } from "next";
import Link from "next/link"; import Link from "next/link";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Colors } from "@/common/colors"; import { Colors } from "@/common/colors";
import { Title } from "@/app/components/title";
/** /**
* Force the page to be dynamic, so it will be regenerated on every request * Force the page to be dynamic, so it will be regenerated on every request
@ -80,8 +81,7 @@ export default async function Page(): Promise<ReactElement> {
return ( return (
<div> <div>
<div className="text-center mb-4"> <div className="text-center mb-4">
<h1 className="text-xl">Mojang Status</h1> <Title title="Mojang Status" subtitle="The current status of Mojang Services" />
<p>The current status of Mojang Services</p>
</div> </div>
<Card <Card
classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]" classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"

@ -4,6 +4,7 @@ import { ReactElement } from "react";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
import { Title } from "@/app/components/title";
type Button = { type Button = {
/** /**
@ -51,16 +52,18 @@ const buttons: Button[] = [
export default function Home(): ReactElement { export default function Home(): ReactElement {
return ( return (
<div className="text-center flex flex-col gap-4"> <div className="text-center flex flex-col gap-4">
<div className="p-4"> <div className="p-2">
<div> <Title
<h1 className="text-4xl mb-2">Minecraft Utilities</h1> title="Minecraft Utilities"
<div> subtitle={
<p> <>
Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player. <p>
</p> Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
<p>We offer you a simple and easy to use API.</p> </p>
</div> <p>We offer you a simple and easy to use API.</p>
</div> </>
}
/>
<div className="flex flex-row gap-2 justify-center mt-4 flex-wrap"> <div className="flex flex-row gap-2 justify-center mt-4 flex-wrap">
{buttons.map((button, index) => { {buttons.map((button, index) => {
@ -84,7 +87,7 @@ export default function Home(): ReactElement {
<Separator /> <Separator />
<div className="flex flex-col gap-4 items-center pt-4"> <div className="flex flex-col gap-4 items-center p-2">
<div className="text-center"> <div className="text-center">
<p className="font-semibold text-xl">API Statistics</p> <p className="font-semibold text-xl">API Statistics</p>
<p>View the statistics for the API in real-time!</p> <p>View the statistics for the API in real-time!</p>

@ -11,6 +11,7 @@ import config from "@root/config.json";
import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library"; import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library";
import { Metadata, Viewport } from "next"; import { Metadata, Viewport } from "next";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Title } from "@/app/components/title";
/** /**
* Force the page to be dynamic, so it will be regenerated on every request * Force the page to be dynamic, so it will be regenerated on every request
@ -71,8 +72,10 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
return ( return (
<div className="h-full flex flex-col items-center"> <div className="h-full flex flex-col items-center">
<div className="mb-4 text-center"> <div className="mb-4 text-center">
<h1 className="text-xl">Lookup a Player</h1> <Title
<p>You can enter a players uuid or username to get information about the player.</p> title="Player Lookup"
subtitle="You can enter a players uuid or username to get information about the player."
/>
<LookupPlayer currentPlayer={id && id[0]} /> <LookupPlayer currentPlayer={id && id[0]} />
</div> </div>

@ -18,6 +18,7 @@ import {
} from "mcutils-library"; } from "mcutils-library";
import { Metadata, Viewport } from "next"; import { Metadata, Viewport } from "next";
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Title } from "@/app/components/title";
/** /**
* Force the page to be dynamic, so it will be regenerated on every request * Force the page to be dynamic, so it will be regenerated on every request
@ -126,8 +127,10 @@ export default async function Page({ params: { platform, hostname } }: Params):
return ( return (
<div className="h-full flex flex-col items-center"> <div className="h-full flex flex-col items-center">
<div className="mb-4 text-center"> <div className="mb-4 text-center">
<h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1> <Title
<p>You can enter a server hostname to get information about the server.</p> title={`Lookup a ${invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server`}
subtitle="You can enter a server hostname to get information about the server."
/>
<LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname && hostname[0]} /> <LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname && hostname[0]} />
</div> </div>

@ -28,7 +28,7 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
return ( return (
<Dialog> <Dialog>
<DialogTrigger asChild>{children}</DialogTrigger> <DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="max-h-[700px] text-sm"> <DialogContent className="max-h-screen md:max-h-[700px] text-sm">
<DialogHeader> <DialogHeader>
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription> <DialogDescription>{description}</DialogDescription>

@ -64,19 +64,21 @@ function rowRenderer({
export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement { export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
return ( return (
<SyntaxHighlighter <div className="text-xs md:text-md">
language="json" <SyntaxHighlighter
style={atomOneDark} language="json"
wrapLongLines style={atomOneDark}
renderer={rowRenderer} wrapLongLines
customStyle={{ renderer={rowRenderer}
maxHeight: "600px", customStyle={{
backgroundColor: "hsl(var(--background-accent))", maxHeight: "600px",
wordBreak: "break-all", backgroundColor: "hsl(var(--background-accent))",
borderRadius: rounded ? "0.75rem" : undefined, wordBreak: "break-all",
}} borderRadius: rounded ? "0.75rem" : undefined,
> }}
{code} >
</SyntaxHighlighter> {code}
</SyntaxHighlighter>
</div>
); );
} }

@ -45,7 +45,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
</div> </div>
</div> </div>
</Card> </Card>
<div className="flex gap-2 flex-wrap"> <div className="flex gap-2 flex-wrap justify-center">
<CodeDialog <CodeDialog
title="Player Data" title="Player Data"
description="The player's data from the API" description="The player's data from the API"

@ -55,7 +55,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
<Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} /> <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
</div> </div>
</div> </div>
<div className="flex gap-2 flex-wrap"> <div className="flex gap-2 flex-wrap justify-center">
<CodeDialog <CodeDialog
title="Server Data" title="Server Data"
description="The servers's data from the API" description="The servers's data from the API"

@ -0,0 +1,15 @@
import { ReactElement } from "react";
type TitleProps = {
title: string | ReactElement;
subtitle: string | ReactElement;
};
export function Title({ title, subtitle }: TitleProps): ReactElement {
return (
<div className="flex flex-col gap-2 items-center">
<div className="text-3xl text-primary font-semibold">{typeof title === "string" ? <h1>{title}</h1> : title}</div>
{typeof subtitle === "string" ? <p>{subtitle}</p> : subtitle}
</div>
);
}