Add networks tab

Author: galt-tr

frontend-react/src/App.tsx

@@ -5,6 +5,7 @@ import Peers from './components/Peers';
 import PeerDetail from './components/PeerDetail';
 import Stats from './components/Stats';
 import { BlockExplorer } from './components/BlockExplorer';
+import Networks from './components/Networks';
 import './App.css';
 
 function Navigation() {
@@ -74,13 +75,23 @@ function Navigation() {
               <Link
                 to="/blocks"
                 className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
-                  location.pathname === '/blocks' 
-                    ? 'border-blue-500 text-gray-900' 
+                  location.pathname === '/blocks'
+                    ? 'border-blue-500 text-gray-900'
                     : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
                 }`}
               >
                 Blocks
               </Link>
+              <Link
+                to="/networks"
+                className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                  location.pathname === '/networks'
+                    ? 'border-blue-500 text-gray-900'
+                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                }`}
+              >
+                Networks
+              </Link>
             </div>
           </div>
 
@@ -151,13 +162,23 @@ function Navigation() {
           <Link
             to="/blocks"
             className={`block px-3 py-2 rounded-md text-base font-medium ${
-              location.pathname === '/blocks' 
-                ? 'bg-blue-50 border-blue-500 text-blue-700' 
+              location.pathname === '/blocks'
+                ? 'bg-blue-50 border-blue-500 text-blue-700'
                 : 'text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800'
             } border-l-4`}
           >
             Blocks
           </Link>
+          <Link
+            to="/networks"
+            className={`block px-3 py-2 rounded-md text-base font-medium ${
+              location.pathname === '/networks'
+                ? 'bg-blue-50 border-blue-500 text-blue-700'
+                : 'text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800'
+            } border-l-4`}
+          >
+            Networks
+          </Link>
         </div>
       </div>
     </nav>
@@ -177,6 +198,7 @@ function App() {
           <Route path="/peers" element={<Peers />} />
           <Route path="/peers/:peerID" element={<PeerDetail />} />
           <Route path="/blocks" element={<BlockExplorer />} />
+          <Route path="/networks" element={<Networks />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </div>