feat: expose NavLink props for grid route items

pubkeyapp · Jan 9, 2024 · 1a0ce72 · 1a0ce72
1 parent 351e0d6
commit 1a0ce72
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 22 deletions.
diff --git a/apps/web/src/app/features/demo/demo-feature-grid-routes.tsx b/apps/web/src/app/features/demo/demo-feature-grid-routes.tsx
@@ -1,5 +1,6 @@
-import { SimpleGrid } from '@mantine/core'
+import { Badge, SimpleGrid } from '@mantine/core'
 import { UiCard, UiGridRoutes } from '@pubkey-ui/core'
+import { IconDashboard } from '@tabler/icons-react'
 
 export function DemoFeatureGridRoutes() {
   return (
@@ -8,11 +9,17 @@ export function DemoFeatureGridRoutes() {
         basePath="/demo/grid-routes"
         routes={[
           {
-            path: 'overview',
-            label: 'Overview',
+            path: 'dashboard',
+            label: 'Dashboard',
+            leftSection: <IconDashboard />,
+            rightSection: (
+              <Badge size="xs" color="brand" variant="outline">
+                New
+              </Badge>
+            ),
             element: (
               <SimpleGrid cols={2} spacing="md">
-                <UiCard title="Overview">Overview</UiCard>
+                <UiCard title="Dashboard">Dashboard</UiCard>
               </SimpleGrid>
             ),
           },
@@ -24,6 +31,11 @@ export function DemoFeatureGridRoutes() {
                 <UiCard title="Content">Content</UiCard>
               </SimpleGrid>
             ),
+            rightSection: (
+              <Badge size="xs" color="brand" variant="outline">
+                New
+              </Badge>
+            ),
           },
           {
             path: 'settings',

diff --git a/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx b/packages/core/src/lib/ui-grid-routes/ui-grid-routes.tsx
@@ -1,11 +1,11 @@
-import { Grid, GridColProps, GridProps, NavLink } from '@mantine/core'
+import { Grid, GridColProps, GridProps, NavLink, NavLinkProps } from '@mantine/core'
 import { ReactNode, useMemo } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { UiNotFound } from '../ui-not-found'
 
-export interface UiGridRoute {
+export interface UiGridRoute extends NavLinkProps {
   path: string
-  label?: string
+  label?: ReactNode
   element: ReactNode
 }
 export interface UiGridRoutesProps extends GridProps {
@@ -22,9 +22,11 @@ export function UiGridRoutes({ basePath, routes, leftColProps, rightColProps, ..
     () =>
       routes
         .filter((app) => app.label)
-        .map((app) => {
-          const to = `${basePath}/${app.path}`
-          return <NavLink active={pathname.startsWith(to)} component={Link} key={app.path} label={app.label} to={to} />
+        .map(({ path, label, element, ...props }) => {
+          const to = `${basePath}/${path}`
+          return (
+            <NavLink active={pathname.startsWith(to)} component={Link} key={path} label={label} to={to} {...props} />
+          )
         }),
     [basePath, pathname, routes],
   )

diff --git a/...rs/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template b/...rs/src/generators/component/files/grid-routes/__prefixFileName__-grid-routes.tsx.template
@@ -1,11 +1,11 @@
-import { Grid, GridColProps, GridProps, NavLink } from '@mantine/core'
+import { Grid, GridColProps, GridProps, NavLink, NavLinkProps } from '@mantine/core'
 import { ReactNode, useMemo } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { <%= prefix.className %>NotFound } from '../<%= prefix.fileName %>-not-found'
 
-export interface <%= prefix.className %>GridRoute {
+export interface <%= prefix.className %>GridRoute extends NavLinkProps {
   path: string
-  label?: string
+  label?: ReactNode
   element: ReactNode
 }
 export interface <%= prefix.className %>GridRoutesProps extends GridProps {
@@ -22,9 +22,11 @@ export function <%= prefix.className %>GridRoutes({ basePath, routes, leftColPro
     () =>
       routes
         .filter((app) => app.label)
-        .map((app) => {
-          const to = `${basePath}/${app.path}`
-          return <NavLink active={pathname.startsWith(to)} component={Link} key={app.path} label={app.label} to={to} />
+        .map(({ path, label, element, ...props }) => {
+          const to = `${basePath}/${path}`
+          return (
+            <NavLink active={pathname.startsWith(to)} component={Link} key={path} label={label} to={to} {...props} />
+          )
         }),
     [basePath, pathname, routes],
   )

diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-grid-routes.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-grid-routes.tsx.template
@@ -1,5 +1,6 @@
-import { SimpleGrid } from '@mantine/core'
+import { Badge, SimpleGrid } from '@mantine/core'
 import { <%= prefix.className %>Card, <%= prefix.className %>GridRoutes } from '<%= uiImport %>'
+import { IconDashboard } from '@tabler/icons-react'
 
 export function DemoFeatureGridRoutes() {
   return (
@@ -8,11 +9,17 @@ export function DemoFeatureGridRoutes() {
         basePath="/demo/grid-routes"
         routes={[
           {
-            path: 'overview',
-            label: 'Overview',
+            path: 'dashboard',
+            label: 'Dashboard',
+            leftSection: <IconDashboard />,
+            rightSection: (
+              <Badge size="xs" color="brand" variant="outline">
+                New
+              </Badge>
+            ),
             element: (
               <SimpleGrid cols={2} spacing="md">
-                <<%= prefix.className %>Card title="Overview">Overview</<%= prefix.className %>Card>
+                <UiCard title="Dashboard">Dashboard</UiCard>
               </SimpleGrid>
             ),
           },
@@ -21,16 +28,21 @@ export function DemoFeatureGridRoutes() {
             label: 'Content',
             element: (
               <SimpleGrid cols={2} spacing="md">
-                <<%= prefix.className %>Card title="Content">Content</<%= prefix.className %>Card>
+                <UiCard title="Content">Content</UiCard>
               </SimpleGrid>
             ),
+            rightSection: (
+              <Badge size="xs" color="brand" variant="outline">
+                New
+              </Badge>
+            ),
           },
           {
             path: 'settings',
             label: 'Settings',
             element: (
               <SimpleGrid cols={2} spacing="md">
-                <<%= prefix.className %>Card title="Settings">Settings</<%= prefix.className %>Card>
+                <UiCard title="Settings">Settings</UiCard>
               </SimpleGrid>
             ),
           },