chore: server-and-serverless template

apps/app/src/components/MessageCard.tsx

@@ -0,0 +1,51 @@
+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>
+  )
+}