59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
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>
|
|
)
|
|
}
|