From e793d0eb394886dcf93e28aa285371645e42ccd4 Mon Sep 17 00:00:00 2001 From: Liam Date: Thu, 18 Apr 2024 08:51:52 +0100 Subject: [PATCH] fix styling on mojang status page --- src/app/(pages)/mojang/status/page.tsx | 6 ++-- src/app/components/card.tsx | 7 ++++- src/app/components/ui/card.tsx | 43 ++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 src/app/components/ui/card.tsx diff --git a/src/app/(pages)/mojang/status/page.tsx b/src/app/(pages)/mojang/status/page.tsx index 40988b0..968205a 100644 --- a/src/app/(pages)/mojang/status/page.tsx +++ b/src/app/(pages)/mojang/status/page.tsx @@ -69,7 +69,7 @@ export default async function Page(): Promise {

Mojang Status

The current status of Mojang Services

- +
{endpointsSize === 0 &&

Unable to fetch endpoint statuses

} {endpointsSize > 0 && ( @@ -77,7 +77,7 @@ export default async function Page(): Promise { Service - Status + Status @@ -89,7 +89,7 @@ export default async function Page(): Promise { {url} - + {formatStatus(status)} diff --git a/src/app/components/card.tsx b/src/app/components/card.tsx index 223c44a..06023b1 100644 --- a/src/app/components/card.tsx +++ b/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
{children}
; + return ( + + {children} + + ); } diff --git a/src/app/components/ui/card.tsx b/src/app/components/ui/card.tsx new file mode 100644 index 0000000..1cfea2e --- /dev/null +++ b/src/app/components/ui/card.tsx @@ -0,0 +1,43 @@ +import * as React from "react"; + +import { cn } from "@/common/utils"; + +const Card = React.forwardRef>(({ className, ...props }, ref) => ( +
+)); +Card.displayName = "Card"; + +const CardHeader = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +); +CardHeader.displayName = "CardHeader"; + +const CardTitle = React.forwardRef>( + ({ className, ...props }, ref) => ( +

+ ), +); +CardTitle.displayName = "CardTitle"; + +const CardDescription = React.forwardRef>( + ({ className, ...props }, ref) => ( +

+ ), +); +CardDescription.displayName = "CardDescription"; + +const CardContent = React.forwardRef>( + ({ className, ...props }, ref) =>

, +); +CardContent.displayName = "CardContent"; + +const CardFooter = React.forwardRef>( + ({ className, ...props }, ref) => ( +
+ ), +); +CardFooter.displayName = "CardFooter"; + +export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };