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,6 +114,22 @@ const ServerResult = ({ server }: ServerResultProps): ReactElement => {
                 </div>
             </div>
 
+            {/* Country & Raw Json */}
+            <div className="flex justify-center items-center gap-5 sm:gap-10 transition-all transform-gpu">
+                {/* Server Geo Location */}
+                {server.geo && (
+                    <SimpleTooltip
+                        content={`Located in ${server.geo.country.name}`}
+                    >
+                        <Image
+                            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"
@@ -123,6 +140,7 @@ const ServerResult = ({ server }: ServerResultProps): ReactElement => {
                     {JSON.stringify(server, undefined, 4)}
                 </CodeDialog>
             </div>
+        </div>
     );
 };
 export default ServerResult;