chore: germantax customer project

packages/components/src/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from './page-header.js'
+export { StatusBadge } from './status-badge.js'

packages/components/src/page-header.tsx

@@ -0,0 +1,27 @@
+import { Title, Text, Group, Stack } from '@pikku/mantine/core'
+import { type ReactNode } from 'react'
+import type { I18nNode } from '@pikku/react'
+
+export function PageHeader({
+  title,
+  description,
+  action,
+}: {
+  title: I18nNode
+  description?: I18nNode
+  action?: ReactNode
+}) {
+  return (
+    <Group justify="space-between" align="flex-start">
+      <Stack gap={4}>
+        <Title order={2}>{title}</Title>
+        {description && (
+          <Text size="sm" c="dimmed">
+            {description}
+          </Text>
+        )}
+      </Stack>
+      {action}
+    </Group>
+  )
+}

packages/components/src/status-badge.tsx

@@ -0,0 +1,33 @@
+import { Badge } from '@pikku/mantine/core'
+import { asI18n } from '@pikku/react'
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: 'gray',
+  pending: 'yellow',
+  in_review: 'orange',
+  under_review: 'orange',
+  approved: 'blue',
+  active: 'green',
+  open: 'green',
+  filed: 'green',
+  completed: 'gray',
+  archived: 'gray',
+  closed: 'gray',
+  rejected: 'red',
+  overdue: 'red',
+  cancelled: 'red',
+}
+
+function formatStatus(status: string): string {
+  return status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const color = STATUS_COLORS[status] ?? 'gray'
+
+  return (
+    <Badge color={color} variant="light" size="sm">
+      {asI18n(formatStatus(status))}
+    </Badge>
+  )
+}