35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import { Group, Stack, Text, Title } from '@pikku/mantine/core'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
|
|
type Variant = 'plum' | 'white'
|
|
|
|
export function BrandMark({
|
|
size = 48,
|
|
variant = 'plum',
|
|
}: {
|
|
size?: number
|
|
variant?: Variant
|
|
}) {
|
|
const src = variant === 'white' ? '/brand/logo-white.svg' : '/brand/logo-plum.svg'
|
|
return <img src={src} alt="Seminarhof Drawehn" width={size} height={size} />
|
|
}
|
|
|
|
export function BrandHeader({ variant = 'plum' }: { variant?: Variant }) {
|
|
useLocale()
|
|
const color = variant === 'white' ? 'white' : 'var(--brand-plum)'
|
|
return (
|
|
<Group gap="md" align="center" wrap="nowrap">
|
|
<BrandMark variant={variant} size={56} />
|
|
<Stack gap={2}>
|
|
<Title order={2} c={color} style={{ letterSpacing: '0.02em' }}>
|
|
{m.common__brand__name()}
|
|
</Title>
|
|
<Text size="sm" c={variant === 'white' ? 'white' : 'dimmed'} fs="italic">
|
|
{m.common__brand__tagline()}
|
|
</Text>
|
|
</Stack>
|
|
</Group>
|
|
)
|
|
}
|