60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname, useRouter } from '@/lib/navigation';
|
|
import { useLocale } from 'next-intl';
|
|
|
|
export default function LanguageSwitcher() {
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const switchLocale = (newLocale: 'de' | 'en') => {
|
|
router.replace(pathname, { locale: newLocale });
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
background: '#f3f4f6',
|
|
borderRadius: '0.375rem',
|
|
padding: '0.25rem',
|
|
gap: '0.25rem'
|
|
}}>
|
|
<button
|
|
onClick={() => switchLocale('de')}
|
|
style={{
|
|
padding: '0.375rem 0.75rem',
|
|
background: locale === 'de' ? 'white' : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '0.25rem',
|
|
cursor: 'pointer',
|
|
fontWeight: locale === 'de' ? '600' : '400',
|
|
fontSize: '0.875rem',
|
|
color: locale === 'de' ? '#111827' : '#6b7280',
|
|
boxShadow: locale === 'de' ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
|
|
transition: 'all 0.2s'
|
|
}}
|
|
>
|
|
DE
|
|
</button>
|
|
<button
|
|
onClick={() => switchLocale('en')}
|
|
style={{
|
|
padding: '0.375rem 0.75rem',
|
|
background: locale === 'en' ? 'white' : 'transparent',
|
|
border: 'none',
|
|
borderRadius: '0.25rem',
|
|
cursor: 'pointer',
|
|
fontWeight: locale === 'en' ? '600' : '400',
|
|
fontSize: '0.875rem',
|
|
color: locale === 'en' ? '#111827' : '#6b7280',
|
|
boxShadow: locale === 'en' ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
|
|
transition: 'all 0.2s'
|
|
}}
|
|
>
|
|
EN
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|