CODEBASE: Refactor code related to in-game documentation link (#2422)

Nice!

src/ui/React/DocumentationLink.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link, type LinkProps } from "@mui/material";
+import { Settings } from "../../Settings/Settings";
+import { Router } from "../GameRoot";
+import { Page } from "../Router";
+import { openDocExternally } from "./Documentation";
+
+export function DocumentationLink(
+  props: React.PropsWithChildren<
+    {
+      page: string;
+    } & LinkProps
+  >,
+): React.ReactElement {
+  return (
+    <Link
+      target="_blank"
+      color={Settings.theme.info}
+      onClick={(event) => {
+        if (event.ctrlKey) {
+          openDocExternally(props.page);
+          return;
+        }
+        Router.toPage(Page.Documentation, { docPage: props.page });
+      }}
+      {...props}
+      sx={{ cursor: "pointer", ...props.sx }}
+    >
+      {props.children}
+    </Link>
+  );
+}

src/ui/React/NsApiDocumentationLink.tsx

@@ -1,29 +1,18 @@
 import React from "react";
-import { Link } from "@mui/material";
-import { Settings } from "../../Settings/Settings";
-import { Router } from "../GameRoot";
-import { Page } from "../Router";
-import { defaultNsApiPage, openDocExternally } from "./Documentation";
+import { defaultNsApiPage } from "./Documentation";
+import { DocumentationLink } from "./DocumentationLink";
 
 export function NsApiDocumentationLink(): React.ReactElement {
   return (
-    <Link
-      target="_blank"
-      onClick={(event) => {
-        if (event.ctrlKey) {
-          openDocExternally(defaultNsApiPage);
-          return;
-        }
-        Router.toPage(Page.Documentation, { docPage: defaultNsApiPage });
-      }}
+    <DocumentationLink
+      page={defaultNsApiPage}
       fontSize="1.2rem"
-      color={Settings.theme.info}
       sx={{
         textDecorationThickness: "3px",
         textUnderlineOffset: "5px",
       }}
     >
       NS API documentation
-    </Link>
+    </DocumentationLink>
   );
 }