feat: add back button

apps/web/src/app/features/demo/demo-feature-back.tsx

@@ -0,0 +1,9 @@
+import { UiBack, UiCard } from '@pubkey-ui/core'
+
+export function DemoFeatureBack() {
+  return (
+    <UiCard title="Back">
+      <UiBack />
+    </UiCard>
+  )
+}

apps/web/src/app/features/demo/demo-feature.tsx

@@ -3,6 +3,7 @@ import { UiContainer, UiNotFound, UiStack } from '@pubkey-ui/core'
 import { ReactNode } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
+import { DemoFeatureBack } from './demo-feature-back'
 import { DemoFeatureCard } from './demo-feature-card'
 import { DemoFeatureCopy } from './demo-feature-copy'
 import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
@@ -26,6 +27,7 @@ export function DemoFeature() {
     element: ReactNode
   }[] = [
     { path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },
+    { path: 'back', label: 'Back', element: <DemoFeatureBack /> },
     { path: 'card', label: 'Card', element: <DemoFeatureCard /> },
     { path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },
     { path: 'dashboard-grid', label: 'Dashboard Grid', element: <DemoFeatureDashboardGrid /> },

packages/core/src/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './ui-alert'
+export * from './ui-back'
 export * from './ui-card'
 export * from './ui-container'
 export * from './ui-copy'

packages/core/src/lib/ui-back/index.ts

@@ -0,0 +1 @@
+export * from './ui-back'

packages/core/src/lib/ui-back/ui-back.tsx

@@ -0,0 +1,13 @@
+import { ActionIcon } from '@mantine/core'
+import { IconArrowLeft } from '@tabler/icons-react'
+import { useUiTheme } from '../ui-theme'
+
+export function UiBack({ to = '../' }: { to?: string }) {
+  const { Link } = useUiTheme()
+
+  return (
+    <ActionIcon color="brand" component={Link} to={to} variant="light">
+      <IconArrowLeft />
+    </ActionIcon>
+  )
+}

packages/generators/src/generators/component/component-generator-schema.d.ts

@@ -15,6 +15,7 @@ export interface ComponentGeneratorSchema {
    */
   type:
     | 'alert'
+    | 'back'
     | 'card'
     | 'container'
     | 'copy'

packages/generators/src/generators/component/component-generator-schema.json

@@ -17,6 +17,7 @@
       "description": "The type of component to create",
       "enum": [
         "alert",
+        "back",
         "card",
         "container",
         "copy",

packages/generators/src/generators/component/files/back/__prefixFileName__-back.tsx.template

@@ -0,0 +1,13 @@
+import { ActionIcon } from '@mantine/core'
+import { IconArrowLeft } from '@tabler/icons-react'
+import { use<%= prefix.className %>Theme } from '../<%= prefix.fileName %>-theme'
+
+export function <%= prefix.className %>Back({ to = '../' }: { to?: string }) {
+  const { Link } = use<%= prefix.className %>Theme()
+
+  return (
+    <ActionIcon color="brand" component={Link} to={to} variant="light">
+      <IconArrowLeft />
+    </ActionIcon>
+  )
+}

packages/generators/src/generators/component/files/back/index.ts.template

@@ -0,0 +1 @@
+export * from './<%= prefixFileName %>-back'

packages/generators/src/generators/components/components.ts

@@ -2,6 +2,7 @@ import { ComponentGeneratorSchema } from '../component/component-generator-schem
 
 export const components: ComponentGeneratorSchema['type'][] = [
   'alert',
+  'back',
   'card',
   'container',
   'copy',

packages/generators/src/generators/feature/files/demo/demo-feature-back.tsx.template

@@ -0,0 +1,9 @@
+import { UiBack, UiCard } from '@pubkey-ui/core'
+
+export function DemoFeatureBack() {
+  return (
+    <UiCard title="Back">
+      <UiBack />
+    </UiCard>
+  )
+}

packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template

@@ -3,6 +3,7 @@ import { <%= prefix.className %>Container, <%= prefix.className %>NotFound, <%=
 import { ReactNode } from 'react'
 import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
+import { DemoFeatureBack } from './demo-feature-back'
 import { DemoFeatureCard } from './demo-feature-card'
 import { DemoFeatureCopy } from './demo-feature-copy'
 import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
@@ -26,6 +27,7 @@ label: string
 element: ReactNode
 }[] = [
 { path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },
+{ path: 'back', label: 'Back', element: <DemoFeatureBack /> },
 { path: 'card', label: 'Card', element: <DemoFeatureCard /> },
 { path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },
 { path: 'dashboard-grid', label: 'Dashboard Grid', element: <DemoFeatureDashboardGrid /> },