52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Card, Stack, Text, Title } from '@pikku/mantine/core'
|
|
import { asI18n } from '@pikku/react'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
|
|
type MessageCardProps = {
|
|
message: string
|
|
updatedAt: string
|
|
updatedBy: {
|
|
email: string
|
|
name: string | null
|
|
} | null
|
|
}
|
|
|
|
export function MessageCard(props: MessageCardProps) {
|
|
useLocale()
|
|
const updatedBy = props.updatedBy?.name || props.updatedBy?.email || m.message__read__nobody()
|
|
|
|
return (
|
|
<Card radius="xl" padding="xl" withBorder bg="rgba(10, 20, 36, 0.82)">
|
|
<Stack gap="lg">
|
|
<div>
|
|
<Text
|
|
tt="uppercase"
|
|
fw={700}
|
|
fz="xs"
|
|
c="blue.3"
|
|
mb="sm"
|
|
style={{ letterSpacing: '0.18em' }}
|
|
>
|
|
{m.message__read__eyebrow()}
|
|
</Text>
|
|
<Title order={2}>{m.message__read__title()}</Title>
|
|
<Text c="dimmed" mt="sm">
|
|
{m.message__read__description()}
|
|
</Text>
|
|
</div>
|
|
|
|
<Card radius="lg" padding="xl" bg="rgba(255,255,255,0.03)" withBorder>
|
|
<Stack gap="xs">
|
|
<Title order={1} fz="2.35rem">
|
|
{asI18n(props.message)}
|
|
</Title>
|
|
<Text c="dimmed">{m.message__read__last_updated_by({ name: updatedBy })}</Text>
|
|
<Text c="dimmed">{asI18n(new Date(props.updatedAt).toLocaleString())}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Card>
|
|
)
|
|
}
|