feat: add dashboard grid component

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

@@ -0,0 +1,57 @@
+import { UiCard, UiDashboardGrid, UiDashboardItem, UiStack } from '@pubkey-ui/core'
+import {
+  IconBuildingBank,
+  IconCashBanknote,
+  IconCoin,
+  IconCreditCard,
+  IconReceipt,
+  IconReceiptRefund,
+  IconReceiptTax,
+  IconRepeat,
+  IconReport,
+} from '@tabler/icons-react'
+import { ReactNode } from 'react'
+import { useRoutes } from 'react-router-dom'
+
+export function useDashboardItems(): {
+  links: UiDashboardItem[]
+  routes: ReactNode
+} {
+  const links: UiDashboardItem[] = [
+    { to: 'credit-cards', label: 'Credit cards', icon: IconCreditCard },
+    { to: 'banks-nearby', label: 'Banks nearby', icon: IconBuildingBank },
+    { to: 'transfers', label: 'Transfers', icon: IconRepeat },
+    { to: 'refunds', label: 'Refunds', icon: IconReceiptRefund },
+    { to: 'receipts', label: 'Receipts', icon: IconReceipt },
+    { to: 'taxes', label: 'Taxes', icon: IconReceiptTax },
+    { to: 'reports', label: 'Reports', icon: IconReport },
+    { to: 'payments', label: 'Payments', icon: IconCoin },
+    { to: 'cashback', label: 'Cashback', icon: IconCashBanknote },
+  ]
+  const routes = useRoutes([
+    { index: true, element: <div>Dashboard Grid</div> },
+    ...links.map((link) => ({ path: link.to, element: <div>{link.label}</div> })),
+  ])
+
+  return {
+    links,
+    routes,
+  }
+}
+
+export function DemoFeatureDashboardGrid() {
+  const base = '/demo/dashboard-grid'
+  const { links, routes } = useDashboardItems()
+  return (
+    <UiStack>
+      <UiDashboardGrid
+        links={links.map(({ to, label, icon }) => ({
+          to: `${base}/${to}`,
+          label,
+          icon,
+        }))}
+      />
+      <UiCard>{routes}</UiCard>
+    </UiStack>
+  )
+}

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

@@ -5,6 +5,7 @@ import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
 import { DemoFeatureAlerts } from './demo-feature-alerts'
 import { DemoFeatureCard } from './demo-feature-card'
 import { DemoFeatureCopy } from './demo-feature-copy'
+import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
 import { DemoFeatureDebug } from './demo-feature-debug'
 import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
@@ -26,6 +27,7 @@ export function DemoFeature() {
     { path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },
     { path: 'card', label: 'Card', element: <DemoFeatureCard /> },
     { path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },
+    { path: 'dashboard-grid', label: 'Dashboard Grid', element: <DemoFeatureDashboardGrid /> },
     { path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },
     { path: 'group', label: 'Group', element: <DemoFeatureGroup /> },
     { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },

apps/web/src/app/features/dev/dev-feature-action-grid.tsx

@@ -0,0 +1,34 @@
+import { UiCard, UiContainer, UiDashboardGrid } from '@pubkey-ui/core'
+import {
+  IconBuildingBank,
+  IconCashBanknote,
+  IconCoin,
+  IconCreditCard,
+  IconReceipt,
+  IconReceiptRefund,
+  IconReceiptTax,
+  IconRepeat,
+  IconReport,
+} from '@tabler/icons-react'
+
+export function DevFeatureActionGrid() {
+  return (
+    <UiContainer>
+      <UiCard title="ActionGrid">
+        <UiDashboardGrid
+          links={[
+            { to: '', label: 'Credit cards', icon: IconCreditCard },
+            { to: '', label: 'Banks nearby', icon: IconBuildingBank },
+            { to: '', label: 'Transfers', icon: IconRepeat },
+            { to: '', label: 'Refunds', icon: IconReceiptRefund },
+            { to: '', label: 'Receipts', icon: IconReceipt },
+            { to: '', label: 'Taxes', icon: IconReceiptTax },
+            { to: '', label: 'Reports', icon: IconReport },
+            { to: '', label: 'Payments', icon: IconCoin },
+            { to: '', label: 'Cashback', icon: IconCashBanknote },
+          ]}
+        />
+      </UiCard>
+    </UiContainer>
+  )
+}

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

@@ -1,11 +1,11 @@
 import { UiContainer } from '@pubkey-ui/core'
 import { DevFeatureLink } from './dev-feature-link'
-import { DevFeatureLogo } from './dev-feature-logo'
+import { DevFeatureActionGrid } from './dev-feature-action-grid'
 
 export function DevFeature() {
   return (
     <UiContainer>
-      <DevFeatureLogo />
+      <DevFeatureActionGrid />
       <DevFeatureLink />
     </UiContainer>
   )

packages/core/src/lib/index.ts

@@ -2,6 +2,7 @@ export * from './ui-alert'
 export * from './ui-card'
 export * from './ui-container'
 export * from './ui-copy'
+export * from './ui-dashboard-grid'
 export * from './ui-debug'
 export * from './ui-group'
 export * from './ui-header'

packages/core/src/lib/ui-dashboard-grid/index.ts

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

packages/core/src/lib/ui-dashboard-grid/ui-dashboard-grid.module.css

@@ -0,0 +1,16 @@
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: var(--mantine-radius-md);
+  height: rem(180px);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  transition: box-shadow 150ms ease, transform 100ms ease;
+
+  @mixin hover {
+    box-shadow: var(--mantine-shadow-md);
+    transform: scale(1.05);
+  }
+}

packages/core/src/lib/ui-dashboard-grid/ui-dashboard-grid.tsx

@@ -0,0 +1,42 @@
+import { SimpleGrid, Text, UnstyledButton, useMantineTheme } from '@mantine/core'
+import { useUiTheme } from '../ui-theme'
+import { ComponentType } from 'react'
+
+import classes from './ui-dashboard-grid.module.css'
+
+const linkColors = ['violet', 'indigo', 'blue', 'green', 'teal', 'cyan', 'pink', 'red', 'orange']
+
+export function getColorByIndex(index: number) {
+  return linkColors[index % linkColors.length]
+}
+
+export interface UiDashboardItem {
+  icon: ComponentType<{ color?: string; size: number | string }>
+  label: string
+  to: string
+  color?: string
+}
+
+export interface UiDashboardGridProps {
+  links: UiDashboardItem[]
+}
+
+export function UiDashboardGrid({ links }: UiDashboardGridProps) {
+  const { Link } = useUiTheme()
+  const theme = useMantineTheme()
+
+  const items = links.map((item, index) => (
+    <UnstyledButton component={Link} to={item.to} key={item.label} className={classes.item}>
+      <item.icon color={theme.colors[item.color ?? getColorByIndex(index)][6]} size={64} />
+      <Text size="xs" mt={7}>
+        {item.label}
+      </Text>
+    </UnstyledButton>
+  ))
+
+  return (
+    <SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }} spacing={{ base: 'sm', md: 'xl' }}>
+      {items}
+    </SimpleGrid>
+  )
+}