Raw Json button

Frontend/config.json

@@ -1,6 +1,7 @@
 {
 	"siteName": "RESTfulMC",
 	"siteUrl": "http://localhost:3000",
+	"apiEndpoint": "https://api.restfulmc.cc",
 	"analyticsDomain": "restfulmc.cc",
 	"metadata": {
 		"title": {

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,7 +21,20 @@ const PlayerResult = ({
 }: {
     player: CachedPlayer;
 }): ReactElement => (
-    <div className="px-2 py-3 flex flex-col gap-3 items-center bg-muted rounded-xl divide-y divide-zinc-700">
+    <div className="relative px-2 py-3 flex flex-col items-center bg-muted rounded-xl">
+        {/* Raw Json */}
+        <div className="absolute top-[7.25rem] right-3">
+            <Link
+                href={`${config.apiEndpoint}/player/${username}`}
+                target="_blank"
+            >
+                <Badge className="bg-minecraft-green-3 hover:bg-minecraft-green-3 hover:opacity-85 text-white font-semibold uppercase transition-all transform-gpu">
+                    Raw Json
+                </Badge>
+            </Link>
+        </div>
+
+        <div className="w-full flex flex-col gap-3 justify-center items-center divide-y divide-zinc-700">
             {/* Details */}
             <div className="flex gap-5 items-center">
                 {/* Player Head */}
@@ -43,7 +57,9 @@ const PlayerResult = ({
 
                     {/* Legacy Badge */}
                     {legacy && (
-                    <p className="text-sm font-semibold uppercase">Legacy</p>
+                        <p className="text-sm font-semibold uppercase">
+                            Legacy
+                        </p>
                     )}
                 </div>
             </div>
@@ -74,5 +90,6 @@ const PlayerResult = ({
                 </div>
             </div>
         </div>
+    </div>
 );
 export default PlayerResult;

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<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

Frontend/src/app/types/config.d.ts

@@ -14,6 +14,11 @@ interface Config {
      */
     siteUrl: string;
 
+    /**
+     * The endpoint of the API.
+     */
+    apiEndpoint: string;
+
     /**
      * The optional domain to track analytics on.
      */