feat: add ui-info-table component

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

@@ -0,0 +1,19 @@
+import { Button, rem } from '@mantine/core'
+import { UiAvatar, UiCard, UiInfoItems, UiInfoTable, UiStack } from '@pubkey-ui/core'
+
+export function DemoFeatureInfoTable() {
+  const info: UiInfoItems = [
+    ['Name', 'John Doe'],
+    ['Email', 'john@example.com'],
+    ['Phone', '555-555-5555'],
+    ['Components', <Button variant="link">Edit</Button>],
+    ['Avatar', <UiAvatar size={rem(40)} radius="xl" url="https://i.pravatar.cc/300" alt="John Doe" />],
+  ]
+  return (
+    <UiCard title="InfoTable">
+      <UiStack gap="xl">
+        <UiInfoTable items={info} />
+      </UiStack>
+    </UiCard>
+  )
+}

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

@@ -12,6 +12,7 @@ import { DemoFeatureForm } from './demo-feature-form'
 import { DemoFeatureGridRoutes } from './demo-feature-grid-routes'
 import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
+import { DemoFeatureInfoTable } from './demo-feature-info-table'
 import { DemoFeatureLoader } from './demo-feature-loader'
 import { DemoFeatureLogo } from './demo-feature-logo'
 import { DemoFeatureMenu } from './demo-feature-menu'
@@ -43,6 +44,7 @@ export function DemoFeature() {
     { path: 'grid-routes', label: 'Grid Routes', element: <DemoFeatureGridRoutes /> },
     { path: 'group', label: 'Group', element: <DemoFeatureGroup /> },
     { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
+    { path: 'info-table', label: 'Info Table', element: <DemoFeatureInfoTable /> },
     { path: 'loader', label: 'Loader', element: <DemoFeatureLoader /> },
     { path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },
     { path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },

packages/core/src/lib/index.ts

@@ -12,6 +12,7 @@ export * from './ui-grid-routes'
 export * from './ui-group'
 export * from './ui-header'
 export * from './ui-helpers'
+export * from './ui-info-table'
 export * from './ui-layout'
 export * from './ui-loader'
 export * from './ui-logo'

packages/core/src/lib/ui-info-table/index.ts

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

packages/core/src/lib/ui-info-table/ui-info-table.tsx

@@ -0,0 +1,23 @@
+import { Table, TableProps } from '@mantine/core'
+import { ReactNode } from 'react'
+
+export type UiInfoItem = [ReactNode, ReactNode] | undefined
+export type UiInfoItems = UiInfoItem[]
+export type UiInfoTableProps = TableProps & { items: UiInfoItems; tdw?: string }
+
+export function UiInfoTable({ items, tdw = '25%', ...props }: UiInfoTableProps) {
+  const filtered = items.filter(Boolean) as [ReactNode, ReactNode][]
+  if (!filtered.length) return null
+  return (
+    <Table {...props}>
+      <Table.Tbody>
+        {filtered.map(([key, value], index) => (
+          <Table.Tr key={index}>
+            <Table.Td w={tdw}>{key}</Table.Td>
+            <Table.Th>{value}</Table.Th>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  )
+}