MinecraftUtilities/Frontend
1
1
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

make mojang status card the whole width of the screen on mobile
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m1s
Details

Browse Source
This commit is contained in:
Lee 2024-04-17 23:29:11 +01:00
parent fa7d3c5ea4
commit f5203f9742
7 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/(pages)/mojang/status/page.tsx
View File

@ -63,41 +63,39 @@ export default async function Page(): Promise<JSX.Element> {
const endpointsSize = Object.entries(endpoints).length; const endpointsSize = Object.entries(endpoints).length;
return ( return (
<div className="flex justify-center text-center"> <Card className="w-full xs:w-fit text-center">
<Card className="w-max xs:w-fit"> <h1 className="text-xl">Mojang Status</h1>
<h1 className="text-xl">Mojang Status</h1> <p>The current status of Mojang Services</p>
<p>The current status of Mojang Services</p>
<div> <div>
{endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>} {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
{endpointsSize > 0 && ( {endpointsSize > 0 && (
<Table className="mt-4 md:w-[500px] text-start"> <Table className="mt-4 md:w-[500px] text-start">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead className="pl-1">Service</TableHead> <TableHead className="pl-1">Service</TableHead>
<TableHead className="pl-1 text-center">Status</TableHead> <TableHead className="pl-1 text-center">Status</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{Object.entries(endpoints).map(([url, status]) => { {Object.entries(endpoints).map(([url, status]) => {
return ( return (
<TableRow key={url}> <TableRow key={url}>
<TableCell className="p-[0.3rem]"> <TableCell className="p-[0.3rem]">
<Link className="hover:text-primary transition-all" href={url} target="_blank"> <Link className="hover:text-primary transition-all" href={url} target="_blank">
{url} {url}
</Link> </Link>
</TableCell> </TableCell>
<TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}> <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
{formatStatus(status)} {formatStatus(status)}
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})} })}
</TableBody> </TableBody>
</Table> </Table>
)} )}
</div> </div>
</Card> </Card>
</div>
); );
} }

2
src/app/(pages)/page.tsx
View File

@ -37,7 +37,7 @@ export default function Home(): JSX.Element {
{buttons.map((button, index) => { {buttons.map((button, index) => {
return ( return (
<Tooltip key={index}> <Tooltip key={index}>
<TooltipTrigger> <TooltipTrigger asChild>
<Button key={index}> <Button key={index}>
<Link href={button.url} target={button.openInNewTab ? "_blank" : ""}> <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
<p>{button.title}</p> <p>{button.title}</p>

2
src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
View File

@ -51,7 +51,7 @@ function checkPlatform(platform: ServerPlatform): boolean {
export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> { export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
try { try {
if (checkPlatform(platform) === false) { if (!checkPlatform(platform)) {
// Invalid platform // Invalid platform
return generateEmbed({ return generateEmbed({
title: "Server Not Found", title: "Server Not Found",

4
src/app/components/container.tsx
View File

@ -6,9 +6,9 @@ export default function Container({
children: React.ReactNode; children: React.ReactNode;
}>): JSX.Element { }>): JSX.Element {
return ( return (
<div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 xs:max-w-[1200px]"> <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
<NavBar /> <NavBar />
<div className="w-full flex-1 p-4">{children}</div> <div className="w-full flex m-4 justify-center">{children}</div>
</div> </div>
); );
} }

2
src/app/components/navbar.tsx
View File

@ -11,7 +11,7 @@ type Page = {
const pages: Page[] = [ const pages: Page[] = [
{ title: "Player", url: "/player" }, { title: "Player", url: "/player" },
{ title: "Server", url: "/server/java" }, { title: "Server", url: "/server/java" },
{ title: "Mojang Status", url: "/mojang/status" }, { title: "Mojang", url: "/mojang/status" },
]; ];
export default function NavBar(): JSX.Element { export default function NavBar(): JSX.Element {

2
src/app/components/player/lookup-player.tsx
View File

@ -40,6 +40,8 @@ export function LookupPlayer(): JSX.Element {
<form className="flex gap-2 justify-center mt-2" action="" onSubmit={(event) => event.preventDefault()}> <form className="flex gap-2 justify-center mt-2" action="" onSubmit={(event) => event.preventDefault()}>
<Input <Input
className="w-fit" className="w-fit"
type="search"
name="query"
placeholder="Name / UUID" placeholder="Name / UUID"
value={id} value={id}
onChange={(event) => { onChange={(event) => {

10
src/app/components/server/lookup-server.tsx
View File

@ -70,7 +70,15 @@ export function LookupServer(): JSX.Element {
action="" action=""
onSubmit={(event) => event.preventDefault()} onSubmit={(event) => event.preventDefault()}
> >
<Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} maxLength={128} /> <Input
className="w-fit"
type="search"
name="query"
placeholder="Hostname"
value={hostname}
onChange={setHostnameValue}
maxLength={128}
/>
<div className="flex gap-2 justify-center"> <div className="flex gap-2 justify-center">
<LookupButton platform={ServerPlatform.Java} /> <LookupButton platform={ServerPlatform.Java} />
<LookupButton platform={ServerPlatform.Bedrock} /> <LookupButton platform={ServerPlatform.Bedrock} />