From 9dbe9632c0af77de850218a97f6eeebcc06c9067 Mon Sep 17 00:00:00 2001 From: Rainnny7 Date: Wed, 17 Apr 2024 19:43:35 -0400 Subject: [PATCH] Raw Json button --- Frontend/config.json | 1 + .../app/components/player/player-result.tsx | 113 ++++++++++-------- Frontend/src/app/components/ui/badge.tsx | 36 ++++++ Frontend/src/app/types/config.d.ts | 105 ++++++++-------- 4 files changed, 157 insertions(+), 98 deletions(-) create mode 100644 Frontend/src/app/components/ui/badge.tsx diff --git a/Frontend/config.json b/Frontend/config.json index 6d32080..3c9c2a9 100644 --- a/Frontend/config.json +++ b/Frontend/config.json @@ -1,6 +1,7 @@ { "siteName": "RESTfulMC", "siteUrl": "http://localhost:3000", + "apiEndpoint": "https://api.restfulmc.cc", "analyticsDomain": "restfulmc.cc", "metadata": { "title": { diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx index fa56bfb..8679129 100644 --- a/Frontend/src/app/components/player/player-result.tsx +++ b/Frontend/src/app/components/player/player-result.tsx @@ -1,8 +1,9 @@ -/* eslint-disable @next/next/no-img-element */ import Image from "next/image"; import Link from "next/link"; import { CachedPlayer, SkinPart } from "restfulmc-lib"; import { ReactElement } from "react"; +import { Badge } from "@/components/ui/badge"; +import config from "@/config"; /** * The result of a player search. @@ -20,57 +21,73 @@ const PlayerResult = ({ }: { player: CachedPlayer; }): ReactElement => ( -
- {/* Details */} -
- {/* Player Head */} - {`${username}'s - - {/* Name, Unique ID, and Badges */} -
-

- {username} -

- - {uniqueId} - - - {/* Legacy Badge */} - {legacy && ( -

Legacy

- )} -
+
+ {/* Raw Json */} +
+ + + Raw Json + +
- {/* Skin Parts */} -
- {/* Header */} -

Skin Parts

+
+ {/* Details */} +
+ {/* Player Head */} + {`${username}'s + + {/* Name, Unique ID, and Badges */} +
+

+ {username} +

+ + {uniqueId} + + + {/* Legacy Badge */} + {legacy && ( +

+ Legacy +

+ )} +
+
{/* Skin Parts */} -
- {Object.entries(parts) - .filter( - ([part]) => - part === SkinPart.HEAD || - part === SkinPart.FACE || - part === SkinPart.BODY_FLAT - ) - .map(([part, url], index) => ( - - {`${username}'s - - ))} +
+ {/* Header */} +

Skin Parts

+ + {/* Skin Parts */} +
+ {Object.entries(parts) + .filter( + ([part]) => + part === SkinPart.HEAD || + part === SkinPart.FACE || + part === SkinPart.BODY_FLAT + ) + .map(([part, url], index) => ( + + {`${username}'s + + ))} +
diff --git a/Frontend/src/app/components/ui/badge.tsx b/Frontend/src/app/components/ui/badge.tsx new file mode 100644 index 0000000..f99cedf --- /dev/null +++ b/Frontend/src/app/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/app/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/Frontend/src/app/types/config.d.ts b/Frontend/src/app/types/config.d.ts index 6ef3067..18d4b12 100644 --- a/Frontend/src/app/types/config.d.ts +++ b/Frontend/src/app/types/config.d.ts @@ -4,46 +4,51 @@ import { Metadata, Viewport } from "next"; * Options for configuration. */ interface Config { - /** - * The name of this site. - */ - siteName: string; + /** + * The name of this site. + */ + siteName: string; - /** - * The URL of this site. - */ - siteUrl: string; + /** + * The URL of this site. + */ + siteUrl: string; - /** - * The optional domain to track analytics on. - */ - analyticsDomain: string | undefined; + /** + * The endpoint of the API. + */ + apiEndpoint: string; - /** - * The metadata of this site. - */ - metadata: Metadata; + /** + * The optional domain to track analytics on. + */ + analyticsDomain: string | undefined; - /** - * The viewport of this site. - */ - viewport: Viewport; + /** + * The metadata of this site. + */ + metadata: Metadata; - /** - * Links to display on the navbar. - *

- * The key is the name of the - * link, and the value is the URL. - *

- */ - navbarLinks: { - [name: string]: string; - }; + /** + * The viewport of this site. + */ + viewport: Viewport; - /** - * Featured items for the landing page. - */ - featuredItems: FeaturedItemProps[]; + /** + * Links to display on the navbar. + *

+ * The key is the name of the + * link, and the value is the URL. + *

+ */ + navbarLinks: { + [name: string]: string; + }; + + /** + * Featured items for the landing page. + */ + featuredItems: FeaturedItemProps[]; } /** @@ -51,23 +56,23 @@ interface Config { * on the landing page. */ type FeaturedItemProps = { - /** - * The name of this item. - */ - name: string; + /** + * The name of this item. + */ + name: string; - /** - * The description of this item. - */ - description: string; + /** + * The description of this item. + */ + description: string; - /** - * The image for this item. - */ - image: string; + /** + * The image for this item. + */ + image: string; - /** - * The href link for this item. - */ - href: string; + /** + * The href link for this item. + */ + href: string; };