48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import Image from '@/framework/image'
|
|
import { Group, Text, Badge } from '@pikku/mantine/core'
|
|
import Link from '@/framework/link'
|
|
import { useParams, usePathname } from '@/framework/navigation'
|
|
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 = usePathname()
|
|
const { lang } = useParams<{ lang?: string }>()
|
|
const homeHref = lang ? `/${lang}` : pathname.startsWith('/pilot') ? '/de' : `/${DEFAULT_LOCALE}`
|
|
|
|
return (
|
|
<Group gap="xs" align="center">
|
|
<Link href={homeHref}>
|
|
<Image
|
|
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>
|
|
)
|
|
}
|