refactor: replace Link in MainLayout to RouteObject map

packages/react/src/MainLayout.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { Button } from "../components/Button";
+import RouteObject from "./RouteObject";
 
 type Theme = "light" | "dark";
 
@@ -61,30 +62,18 @@ function TopNav() {
             <Link to="/" className="font-bold">
               PSW/UI
             </Link>
-            <Link
+            {RouteObject.mainNav.map((link) => {
-              to="/docs"
+              return (
-              data-active={
+                <Link
-                location.pathname.startsWith("/docs") &&
+                  key={link.path}
-                !location.pathname.startsWith("/docs/components")
+                  to={link.path}
-              }
+                  data-active={link.eq(location.pathname)}
-              className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
+                  className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
-            >
+                >
-              Docs
+                  {link.name}
-            </Link>
+                </Link>
-            <Link
+              );
-              to="/docs/components"
+            })}
-              data-active={location.pathname.startsWith("/docs/components")}
-              className="font-light text-base data-[active=true]:text-current text-neutral-500 hover:text-neutral-700"
-            >
-              Components
-            </Link>
-            <Link
-              data-comment="external"
-              to="/github"
-              className="font-light text-base text-neutral-500 hover:text-neutral-700"
-            >
-              Github
-            </Link>
           </div>
           <div data-role="controls" className="flex flex-row items-center">
             <ThemeButton />

packages/react/src/RouteObject.ts

@@ -0,0 +1,19 @@
+export default {
+  mainNav: [
+    {
+      path: "/docs",
+      name: "Docs",
+      eq: (pathname: string) => pathname.startsWith("/docs") && !pathname.startsWith("/docs/components")
+    },
+    {
+      path: "/docs/components",
+      name: "Components",
+      eq: (pathname: string) => pathname.startsWith("/docs/components")
+    },
+    {
+      path: "https://github.com/p-sw/ui",
+      name: "Github",
+      eq: () => false
+    }
+  ]
+}