fix styling on mojang status page

src/app/(pages)/mojang/status/page.tsx

@@ -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>

src/app/components/card.tsx

@@ -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>
+  );
 }

src/app/components/ui/card.tsx

@@ -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 };