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

make pages more consistent on mobile
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Lee
2024-04-19 21:53:11 +01:00
parent 95fef83dcf
commit 78390a3bc9
4 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,33 +83,34 @@ export default async function Page(): Promise<ReactElement> {
<h1 className="text-xl">Mojang Status</h1>
<p>The current status of Mojang Services</p>
</div>
<Card classNameCard="py-0 pb-2" classNameContent="w-[23rem] md:w-[35rem] text-left">
<div className="flex flex-col divide-y gap-2">
{endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
{endpoints.length > 0 &&
endpoints.map((endpoint: CachedEndpointStatus) => {
const { name, hostname, status } = endpoint;
<Card
classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"
classNameContent="text-left flex flex-col divide-y gap-2"
>
{endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
{endpoints.length > 0 &&
endpoints.map((endpoint: CachedEndpointStatus) => {
const { name, hostname, status } = endpoint;
const url = `https://${hostname}`;
return (
<div key={name} className="flex flex-row justify-between pt-2">
<div className="flex flex-col leading-[1.5rem]">
<p className="font-semibold">{name}</p>
<Link
href={url}
className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
target="_blank"
>
<p>{url}</p>
</Link>
</div>
<div className={cn("flex items-center font-semibold", getColor(status))}>
<p>{formatStatus(status)}</p>
</div>
const url = `https://${hostname}`;
return (
<div key={name} className="flex flex-row justify-between pt-2">
<div className="flex flex-col leading-[1.5rem]">
<p className="font-semibold">{name}</p>
<Link
href={url}
className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
target="_blank"
>
<p>{url}</p>
</Link>
</div>
);
})}
</div>
<div className={cn("flex items-center font-semibold", getColor(status))}>
<p>{formatStatus(status)}</p>
</div>
</div>
);
})}
</Card>
</div>
);