Fix MGRS font size, make info page tabbed

src/pages/Info.tsx

@@ -1,18 +1,50 @@
 import type React from "react";
 
-import JSONPretty from "react-json-pretty";
+import { JSONTree } from "react-json-tree";
 
+import {
+  TabbedContent,
+  TabType,
+} from "@app/components/layout/page/TabbedContent.js";
 import { useDevice } from "@core/providers/useDevice.js";
+import { EyeIcon } from "@heroicons/react/24/outline";
 
 export const InfoPage = (): JSX.Element => {
-  const { hardware, nodes } = useDevice();
+  const { channels, config, moduleConfig, hardware, nodes, waypoints } =
+    useDevice();
 
-  const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
+  const tabs: TabType[] = [
+    {
+      name: "Channels",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={channels} />,
+    },
+    {
+      name: "Config",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={config} />,
+    },
+    {
+      name: "Module Config",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={moduleConfig} />,
+    },
+    {
+      name: "Hardware",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={hardware} />,
+    },
+    {
+      name: "Nodes",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={nodes} />,
+    },
+    {
+      name: "Waypoints",
+      icon: <EyeIcon className="h-4" />,
+      element: () => <JSONTree theme="monokai" data={waypoints} />,
+    },
+  ];
 
-  return (
-    <div className="w-full overflow-y-auto">
-      <JSONPretty data={myNode} />
-      <JSONPretty data={hardware} />
-    </div>
-  );
+  return <TabbedContent tabs={tabs} />;
 };