chore: seminarhof customer project

apps/app/src/components/StatusPill.tsx

@@ -0,0 +1,58 @@
+import { Box, Group, Text } from '@pikku/mantine/core'
+import { mKey } from '@/i18n/messages'
+import { useLocale } from '@/i18n/config'
+import { asI18n } from '@pikku/react'
+import {
+  BOOKING_STATUS,
+  INVOICE_STATUS,
+  type BookingStatus,
+  type InvoiceStatus,
+} from '../lib/status'
+
+type Variant =
+  | { kind: 'booking'; status: BookingStatus }
+  | { kind: 'invoice'; status: InvoiceStatus }
+
+export function StatusPill(props: Variant & { size?: 'sm' | 'xs' }) {
+  useLocale()
+  const size = props.size ?? 'xs'
+  const palette =
+    props.kind === 'booking'
+      ? BOOKING_STATUS[props.status]
+      : INVOICE_STATUS[props.status]
+  const labelKey =
+    props.kind === 'booking'
+      ? `common.pages.bookingStatus.label.${props.status}`
+      : `common.pages.adminBooking.invoices.status.${props.status}`
+
+  return (
+    <Group
+      gap={6}
+      wrap="nowrap"
+      style={{
+        background: palette.bg,
+        color: palette.fg,
+        padding: size === 'xs' ? '2px 8px' : '4px 10px',
+        borderRadius: 999,
+        fontSize: size === 'xs' ? 11 : 12,
+        fontWeight: 600,
+        letterSpacing: '0.02em',
+        whiteSpace: 'nowrap',
+        display: 'inline-flex',
+        lineHeight: 1.2,
+      }}
+    >
+      <Box
+        component="span"
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: 999,
+          background: palette.dot,
+          flexShrink: 0,
+        }}
+      />
+      <Text component="span" inherit>{asI18n(`${mKey(labelKey as any)}`)}</Text>
+    </Group>
+  )
+}