44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Group, Text, Badge } from '@pikku/mantine/core'
|
|
import { Link, useLocation, useParams } from '@tanstack/react-router'
|
|
import { DEFAULT_LOCALE } from '@/config'
|
|
import { useI18n } from '@/context/i18n-provider'
|
|
import { asI18n } from '@pikku/react'
|
|
|
|
interface LogoProps {
|
|
size?: 'sm' | 'md' | 'lg'
|
|
showBeta?: boolean
|
|
type?: string
|
|
}
|
|
|
|
export default function Logo({ size = 'md', showBeta = true, type }: LogoProps) {
|
|
const t = useI18n()
|
|
const dimensions = {
|
|
sm: { width: 24, height: 24, textSize: 'lg' as const },
|
|
md: { width: 32, height: 32, textSize: 'xl' as const },
|
|
lg: { width: 40, height: 40, textSize: 'xl' as const }
|
|
}
|
|
|
|
const { width, height, textSize } = dimensions[size]
|
|
const pathname = useLocation({ select: (l) => l.pathname })
|
|
const { lang } = useParams({ strict: false }) as { lang?: string }
|
|
const homeHref = lang ? `/${lang}` : pathname.startsWith('/pilot') ? '/de' : `/${DEFAULT_LOCALE}`
|
|
|
|
return (
|
|
<Group gap="xs" align="center">
|
|
<Link to={homeHref}>
|
|
<img
|
|
src="/heygermany-logo-small.png"
|
|
alt="HeyGermany logo"
|
|
width={width}
|
|
height={height}
|
|
/>
|
|
</Link>
|
|
<Text size={textSize} fw={500}>
|
|
{t('logo.wordmark')}
|
|
</Text>
|
|
{type && <Badge variant="light" color="primary">{asI18n(type)}</Badge>}
|
|
{!type && showBeta && <Text size="xs" c="gray.8">{t('layout.topbar.beta')}</Text>}
|
|
</Group>
|
|
)
|
|
}
|