Use polymorphic component for links

RobinTTY · Oct 20, 2023 · 3d3b735 · 3d3b735
1 parent 6503620
commit 3d3b735
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/src/client/src/components/navigation-link/NavigationLink.story.tsx b/src/client/src/components/navigation-link/NavigationLink.story.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconHome } from '@tabler/icons-react';
+import { BrowserRouter } from 'react-router-dom';
 import { NavigationLink } from './NavigationLink';
 
 const meta: Meta<typeof NavigationLink> = {
@@ -13,7 +14,14 @@ type Story = StoryObj<typeof NavigationLink>;
 // TODO: this is basically the same component as AccountButton, should be combined
 export const Default: Story = {
   render: () => (
-    <NavigationLink icon={<IconHome size="1.25rem" />} color="blue" label="Dashboard" />
+    <BrowserRouter>
+      <NavigationLink
+        icon={<IconHome size="1.25rem" />}
+        color="blue"
+        label="Dashboard"
+        to="dashboard"
+      />
+    </BrowserRouter>
   ),
 };
 

diff --git a/src/client/src/components/navigation-link/NavigationLink.tsx b/src/client/src/components/navigation-link/NavigationLink.tsx
@@ -1,9 +1,10 @@
 import { ThemeIcon, UnstyledButton, Group, Text } from '@mantine/core';
+import { Link } from 'react-router-dom';
 
 import classes from './NavigationLink.module.css';
 
-export const NavigationLink = ({ icon, color, label }: NavigationLinkProps) => (
-  <UnstyledButton className={classes['unstyled-button']}>
+export const NavigationLink = ({ icon, color, label, to }: NavigationLinkProps) => (
+  <UnstyledButton className={classes['unstyled-button']} component={Link} to={to}>
     <Group>
       <ThemeIcon size="lg" color={color} variant="light">
         {icon}
@@ -19,4 +20,5 @@ interface NavigationLinkProps {
   icon: React.ReactNode;
   color: string;
   label: string;
+  to: string;
 }
diff --git a/src/client/src/components/shell/Shell.tsx b/src/client/src/components/shell/Shell.tsx
@@ -1,4 +1,4 @@
-import { Outlet, Link } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { AppShell, Box, Stack } from '@mantine/core';
 import { IconArrowsExchange, IconHome, IconWallet } from '@tabler/icons-react';
 
@@ -34,19 +34,24 @@ export const Shell = () => (
       <AppShell.Section grow>
         <Stack justify="flex-end" h="100%" gap="xs" pb="md">
           {/* TODO: These links should probably be implemented via polymorphic components */}
-          <Link to="dashboard">
-            <NavigationLink icon={<IconHome size="1.25rem" />} color="blue" label="Dashboard" />
-          </Link>
-          <Link to="accounts">
-            <NavigationLink icon={<IconWallet size="1.25rem" />} color="violet" label="Accounts" />
-          </Link>
-          <Link to="transactions">
-            <NavigationLink
-              icon={<IconArrowsExchange size="1.25rem" />}
-              color="teal"
-              label="Transactions"
-            />
-          </Link>
+          <NavigationLink
+            icon={<IconHome size="1.25rem" />}
+            color="blue"
+            label="Dashboard"
+            to="dashboard"
+          />
+          <NavigationLink
+            icon={<IconWallet size="1.25rem" />}
+            color="violet"
+            label="Accounts"
+            to="accounts"
+          />
+          <NavigationLink
+            icon={<IconArrowsExchange size="1.25rem" />}
+            color="teal"
+            label="Transactions"
+            to="transactions"
+          />
         </Stack>
       </AppShell.Section>
       <AppShell.Section>