update mojang status page
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m9s

This commit is contained in:
Lee 2024-04-18 05:24:21 +01:00
parent 0f304b22b1
commit f1447ebb9d

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