43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { getLocale, setLocale } from '@umijs/max';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const LangSwitches = () => {
|
|
const [isEnglish, setIsEnglish] = useState(false);
|
|
|
|
// Keep checkbox in sync with current Umi locale without forcing a reload
|
|
useEffect(() => {
|
|
const syncLocale = () => setIsEnglish(getLocale() === 'en-US');
|
|
|
|
syncLocale();
|
|
window.addEventListener('languagechange', syncLocale);
|
|
|
|
return () => {
|
|
window.removeEventListener('languagechange', syncLocale);
|
|
};
|
|
}, []);
|
|
|
|
const handleLanguageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newLocale = e.target.checked ? 'en-US' : 'vi-VN';
|
|
setIsEnglish(e.target.checked);
|
|
setLocale(newLocale, false); // Update locale instantly without full page reload
|
|
};
|
|
|
|
return (
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
className="sr-only peer"
|
|
type="checkbox"
|
|
checked={isEnglish}
|
|
onChange={handleLanguageChange}
|
|
/>
|
|
<div className="w-20 h-10 rounded-full bg-gradient-to-r from-orange-400 to-red-400 peer-checked:from-blue-400 peer-checked:to-indigo-500
|
|
transition-all duration-500 after:content-['🇻🇳'] after:absolute after:top-1 after:left-1 after:bg-white after:rounded-full after:h-8
|
|
after:w-8 after:flex after:items-center after:justify-center after:transition-all after:duration-500 peer-checked:after:translate-x-10
|
|
peer-checked:after:content-['🏴'] after:shadow-md after:text-2xl"
|
|
></div>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export default LangSwitches;
|