NajjarandClaude Opus 4.8
873026a4a9
- Convert site from royal-blue theme to black/white monochrome (desaturate all blue-hued colors; keep WhatsApp green and error red) - Swap blue circular brand logo for mono YS mark; regenerate favicon/PWA icons - Add 6 Pudu robots (CC1 Pro, MT1 Max, MT1 Vac, T600, T600 Underride, BG1 Pro) - Fix favicon.ico to RGBA (Next 16 Turbopack decode) and Stripe apiVersion type Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export function LanguageSwitcher() {
|
|
const { i18n } = useTranslation();
|
|
|
|
const toggleLanguage = useCallback(() => {
|
|
const newLang = i18n.language === 'en' ? 'ar' : 'en';
|
|
i18n.changeLanguage(newLang);
|
|
|
|
// Force LTR layout regardless of language
|
|
document.documentElement.dir = 'ltr';
|
|
document.documentElement.lang = newLang;
|
|
}, [i18n]);
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleLanguage}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
|
border: '1px solid rgba(0, 0, 0, 0.08)',
|
|
borderRadius: '0.5rem',
|
|
color: '#0b0b0b',
|
|
cursor: 'pointer',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
transition: 'all 0.2s ease',
|
|
}}
|
|
aria-label="Toggle language"
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="2" y1="12" x2="22" y2="12" />
|
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
|
</svg>
|
|
{i18n.language === 'en' ? 'العربية' : 'English'}
|
|
</button>
|
|
);
|
|
}
|