69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { Language, setLanguage, useLanguage } from '@/lib/i18n';
|
|
|
|
function Flag({ language }: { language: Language }) {
|
|
if (language === 'en') {
|
|
// Union Jack (UK flag) - simplified but recognizable
|
|
return (
|
|
<svg width="24" height="16" viewBox="0 0 60 30" fill="none" aria-hidden="true">
|
|
{/* Blue background */}
|
|
<rect width="60" height="30" fill="#012169"/>
|
|
{/* White diagonal saltire (St Andrew) */}
|
|
<path d="M0 0L60 30M60 0L0 30" stroke="white" strokeWidth="6"/>
|
|
{/* Red diagonal saltire (St Patrick) - offset */}
|
|
<path d="M0 0L30 15M60 0L30 15" stroke="#C8102E" strokeWidth="2"/>
|
|
<path d="M60 30L30 15M0 30L30 15" stroke="#C8102E" strokeWidth="2"/>
|
|
{/* White cross (St George + St Andrew) */}
|
|
<rect x="25" y="0" width="10" height="30" fill="white"/>
|
|
<rect x="0" y="10" width="60" height="10" fill="white"/>
|
|
{/* Red cross (St George) */}
|
|
<rect x="27" y="0" width="6" height="30" fill="#C8102E"/>
|
|
<rect x="0" y="12" width="60" height="6" fill="#C8102E"/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<svg width="24" height="16" viewBox="0 0 24 16" fill="none" aria-hidden="true">
|
|
<rect width="24" height="8" fill="#FFD100" />
|
|
<rect y="8" width="24" height="4" fill="#073685" />
|
|
<rect y="12" width="24" height="4" fill="#EF3340" />
|
|
<circle cx="12" cy="8.2" r="2.2" fill="#FFFFFF" opacity="0.95" />
|
|
<circle cx="12" cy="8.2" r="1.1" fill="#EF3340" opacity="0.8" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function LanguageSwitcher() {
|
|
const currentLang = useLanguage();
|
|
const nextLanguage = currentLang === 'en' ? 'es' : 'en';
|
|
|
|
const toggleLanguage = () => {
|
|
setLanguage(nextLanguage);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleLanguage}
|
|
style={{
|
|
position: 'fixed',
|
|
top: '0.5rem',
|
|
right: '7rem',
|
|
zIndex: 1000,
|
|
background: 'rgba(255, 255, 255, 0.9)',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '4px',
|
|
padding: '0.5rem',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
aria-label={`Switch to ${currentLang === 'en' ? 'Spanish' : 'English'}`}
|
|
>
|
|
<Flag language={nextLanguage} />
|
|
</button>
|
|
);
|
|
}
|