add a title component
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
This commit is contained in:
parent
78390a3bc9
commit
1ed0e72316
@ -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"
|
||||||
|
15
src/app/components/title.tsx
Normal file
15
src/app/components/title.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user