Frontend: Show the country of a server in the result

Frontend/next.config.mjs

@@ -9,6 +9,10 @@ const nextConfig = {
 				protocol: "https",
 				hostname: "api.restfulmc.cc",
 			},
+			{
+				protocol: "https",
+				hostname: "flagcdn.com",
+			},
 		],
 	},
 	experimental: {

Frontend/package.json

@@ -51,7 +51,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "remote-mdx": "^0.0.7",
-    "restfulmc-lib": "^1.1.3",
+    "restfulmc-lib": "^1.1.4",
     "shadcn-ui": "0.8.0",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",

Frontend/src/app/components/server/server-result.tsx

@@ -32,6 +32,7 @@ import config from "@/config";
 import { minecraft } from "@/font/fonts";
 import CodeDialog from "@/components/code/code-dialog";
 import RawJson from "@/components/badge/raw-json";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 /**
  * The props for a server result.
@@ -113,15 +114,32 @@ const ServerResult = ({ server }: ServerResultProps): ReactElement => {
                 </div>
             </div>
 
-            {/* Raw Json */}
+            {/* Country & Raw Json */}
-            <CodeDialog
+            <div className="flex justify-center items-center gap-5 sm:gap-10 transition-all transform-gpu">
-                title="Raw Server Data"
+                {/* Server Geo Location */}
-                description={`The raw JSON data for the player ${server.hostname}:`}
+                {server.geo && (
-                language="json"
+                    <SimpleTooltip
-                trigger={<RawJson />}
+                        content={`Located in ${server.geo.country.name}`}
-            >
+                    >
-                {JSON.stringify(server, undefined, 4)}
+                        <Image
-            </CodeDialog>
+                            src={`https://flagcdn.com/w40/${server.geo.country.code.toLowerCase()}.png`}
+                            alt={`Country Flag for ${server.geo.country.name}`}
+                            width={36}
+                            height={36}
+                        />
+                    </SimpleTooltip>
+                )}
+
+                {/* Raw Json */}
+                <CodeDialog
+                    title="Raw Server Data"
+                    description={`The raw JSON data for the player ${server.hostname}:`}
+                    language="json"
+                    trigger={<RawJson />}
+                >
+                    {JSON.stringify(server, undefined, 4)}
+                </CodeDialog>
+            </div>
         </div>
     );
 };