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

fix styling on mojang status page
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m3s
Details

Browse Source
This commit is contained in:
Lee 2024-04-18 08:51:52 +01:00
parent f69d69373c
commit e793d0eb39
3 changed files with 52 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,7 +69,7 @@ export default async function Page(): Promise<ReactElement> {
<h1 className="text-xl">Mojang Status</h1>
<p>The current status of Mojang Services</p>
</div>
<Card className="w-full xs:w-fit text-center">
<Card className="w-full xs:w-fit text-left">
<div>
{endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
{endpointsSize > 0 && (
@ -77,7 +77,7 @@ export default async function Page(): Promise<ReactElement> {
<TableHeader>
<TableRow>
<TableHead className="pl-1 h-8">Service</TableHead>
<TableHead className="pl-1 h-8 text-center">Status</TableHead>
<TableHead className="pl-1 h-8">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -89,7 +89,7 @@ export default async function Page(): Promise<ReactElement> {
{url}
</Link>
</TableCell>
<TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
<TableCell className={cn(getColor(status), "p-[0.3rem] text-left")}>
{formatStatus(status)}
</TableCell>
</TableRow>

7
src/app/components/card.tsx
View File

@ -1,3 +1,4 @@
import { CardContent, Card as ShadcnCard } from "@/app/components/ui/card";
import { cn } from "@/common/utils";
import { ReactElement } from "react";
@ -14,5 +15,9 @@ type CardProps = {
};
export function Card({ children, className }: CardProps): ReactElement {
return <div className={cn("bg-secondary rounded-lg p-3", className)}>{children}</div>;
return (
<ShadcnCard className={cn(className, "pt-4")}>
<CardContent>{children}</CardContent>
</ShadcnCard>
);
}

43
src/app/components/ui/card.tsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from "react";
import { cn } from "@/common/utils";
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
));
Card.displayName = "Card";
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-4", className)} {...props} />
),
);
CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
),
);
CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
({ className, ...props }, ref) => (
<p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
),
);
CardDescription.displayName = "CardDescription";
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />,
);
CardContent.displayName = "CardContent";
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center p-4 pt-0", className)} {...props} />
),
);
CardFooter.displayName = "CardFooter";
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };