Referansesider: Dynamic route-list generation for header and homepage

navikt · Sep 25, 2024 · e9dc171 · e9dc171
1 parent 544b80e
commit e9dc171
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 47 deletions.
diff --git a/examples/referansesider/src/components/Page.tsx b/examples/referansesider/src/components/Page.tsx
@@ -15,7 +15,7 @@ export const Page = ({
   return (
     <div
       className={clsx(
-        "flex flex-col px-2 w-full m-auto mb-20 min-h-screen",
+        "flex flex-col px-2 w-full m-auto pb-20 min-h-screen",
         "lg:px-0",
         { [`lg:w-[72ch]`]: width === "medium" },
         { [`lg:w-[921px]`]: width === "large" },

diff --git a/examples/referansesider/src/components/RouteMapper.tsx b/examples/referansesider/src/components/RouteMapper.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from "@tanstack/react-router";
+
+const pathToName = (path: string) => {
+  const parsed = path.replace(/\//g, " ").trim();
+  if (parsed === "") return "Hjem";
+  return parsed;
+};
+
+export const RouteMapper = ({
+  children,
+  skipRoot = false,
+}: {
+  children: (path: string, name: string, root: boolean) => React.ReactNode;
+  skipRoot?: boolean;
+}) => {
+  const { routesByPath } = useRouter();
+  let paths = Object.keys(routesByPath);
+  if (skipRoot) {
+    paths = paths.filter((path) => path !== "/");
+  }
+
+  return (
+    <>
+      {paths.map((path) => {
+        const name = pathToName(path);
+        return children(path, name, path === "/");
+      })}
+    </>
+  );
+};
diff --git a/examples/referansesider/src/routes/__root.tsx b/examples/referansesider/src/routes/__root.tsx
@@ -2,33 +2,14 @@ import {
   ErrorComponent,
   Link,
   Outlet,
-  ReactNode,
   createRootRoute,
 } from "@tanstack/react-router";
 import React from "react";
 import styled from "styled-components";
 import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+import { RouteMapper } from "../components/RouteMapper";
 import { ThemeSwitch } from "../theme/ThemeSwitch";
 
-const ScRouteLink = styled(Link)`
-  &[aria-current="page"] {
-    background-color: ${tokens.BgRaised};
-    text-decoration: underline;
-  }
-`;
-
-const ScUl = styled.ul`
-  background-color: ${tokens.BgSunken};
-`;
-
-const RouteLink = ({ children, to }: { children: ReactNode; to: string }) => {
-  return (
-    <ScRouteLink to={to} className="rounded p-2 underline-offset-2">
-      {children}
-    </ScRouteLink>
-  );
-};
-
 const TanStackRouterDevtools =
   process.env.NODE_ENV === "production"
     ? () => null // Render nothing in production
@@ -41,27 +22,45 @@ const TanStackRouterDevtools =
         })),
       );
 
+const ScHeader = styled.header`
+  border-bottom: 1px solid ${tokens.BorderSubtle};
+`;
+
+const ScRouteLink = styled(Link)`
+  &[aria-current="page"] {
+    background-color: ${tokens.BgRaised};
+    text-decoration: underline;
+  }
+`;
+
+const ScUl = styled.ul`
+  background-color: ${tokens.BgSunken};
+`;
+
 export const Route = createRootRoute({
   errorComponent: ErrorComponent,
   component: () => (
     <>
-      <header className="p-2 px-4 flex mx-auto items-center gap-6 max-w-screen-2xl">
+      <ScHeader className="p-2 px-4 flex mx-auto items-center gap-6 max-w-screen-2xl">
         <ScUl className="inline-flex items-center gap-1 justify-center h-12 rounded px-1">
-          <li>
-            <RouteLink to="/sykepenger">Sykepenger</RouteLink>
-          </li>
-          <li>
-            <RouteLink to="/minside">Min Side</RouteLink>
-          </li>
-          <li>
-            <RouteLink to="/komponenter">Komponenter</RouteLink>
-          </li>
+          <RouteMapper>
+            {(path, name) => (
+              <li key={path}>
+                <ScRouteLink
+                  to={path}
+                  className="rounded capitalize p-2 underline-offset-2"
+                >
+                  {name}
+                </ScRouteLink>
+              </li>
+            )}
+          </RouteMapper>
         </ScUl>
         <div className="ml-auto h-fit">
           <ThemeSwitch />
         </div>
-      </header>
-      <hr />
+      </ScHeader>
+
       <div className="overflow-x-clip">
         <Outlet />
       </div>

diff --git a/examples/referansesider/src/routes/index.tsx b/examples/referansesider/src/routes/index.tsx
@@ -1,7 +1,40 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import styled from "styled-components";
+import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+import { Page } from "../components/Page";
+import { RouteMapper } from "../components/RouteMapper";
+
+const ScCard = styled(Link)`
+  padding: 1.5rem;
+  display: block;
+  border-radius: 12px;
+  text-transform: capitalize;
+  color: ${tokens.TextAccent};
+  font-weight: 550;
+  font-size: 24px;
+  border: 1px solid ${tokens.BorderAccentSubtle};
+  background: ${tokens.BgAccent};
+
+  &:hover {
+    background: ${tokens.BgAccentHover};
+    text-decoration: underline;
+  }
+`;
 
 const Component = () => {
-  return <h1>pick a referanseside</h1>;
+  return (
+    <Page>
+      <ul className="py-12 flex flex-col gap-4">
+        <RouteMapper skipRoot>
+          {(path, name) => (
+            <li key={path}>
+              <ScCard to={path}>{name}</ScCard>
+            </li>
+          )}
+        </RouteMapper>
+      </ul>
+    </Page>
+  );
 };
 
 export const Route = createFileRoute("/")({ component: Component });
diff --git a/examples/referansesider/src/routes/komponenter.tsx b/examples/referansesider/src/routes/komponenter.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import styled from "styled-components";
 import { Button } from "../components/Button";
 import { Link } from "../components/Link";
+import { Page } from "../components/Page";
 
 export const Route = createFileRoute("/komponenter")({
   component: ComponentPage,
@@ -15,17 +16,19 @@ const Section = styled.section`
 
 function ComponentPage() {
   return (
-    <div className="py-12 flex flex-col items-center gap-8">
-      <Section aria-label="Buttons">
-        <Button>Button</Button>
-        <Button variant="secondary">Button</Button>
-      </Section>
-      <Section aria-label="Link">
-        <Link href="#">Når du har sykepenger</Link>
-        <Link href="#" inverted>
-          Når du har sykepenger
-        </Link>
-      </Section>
-    </div>
+    <Page>
+      <div className="py-12 flex flex-col items-center gap-8">
+        <Section aria-label="Buttons">
+          <Button>Button</Button>
+          <Button variant="secondary">Button</Button>
+        </Section>
+        <Section aria-label="Link">
+          <Link href="#">Når du har sykepenger</Link>
+          <Link href="#" inverted>
+            Når du har sykepenger
+          </Link>
+        </Section>
+      </div>
+    </Page>
   );
 }