78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { changeLanguage } from '../i18n'
|
||
import './LanguageSwitchModal.css'
|
||
|
||
interface LanguageSwitchModalProps {
|
||
showModal: boolean
|
||
onClose: () => void
|
||
}
|
||
|
||
const LanguageSwitchModal: React.FC<LanguageSwitchModalProps> = ({ showModal, onClose }) => {
|
||
const { t, i18n } = useTranslation()
|
||
const [selectedLanguage, setSelectedLanguage] = useState(i18n.language)
|
||
|
||
const handleSubmit = async () => {
|
||
await changeLanguage(selectedLanguage)
|
||
|
||
// TODO: Submit language preference to backend API
|
||
// await api.updateUserLanguagePreference(selectedLanguage)
|
||
|
||
onClose()
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
setSelectedLanguage(i18n.language)
|
||
onClose()
|
||
}
|
||
|
||
if (!showModal) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="language-modal-overlay" onClick={handleCancel}>
|
||
<div className="language-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="language-modal-header">
|
||
<h3>{t('languageSwitch.title')}</h3>
|
||
<button
|
||
className="language-modal-close"
|
||
onClick={handleCancel}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div className="language-modal-body">
|
||
<div className="form-group">
|
||
<label htmlFor="language-select">{t('languageSwitch.selectLanguage')}</label>
|
||
<select
|
||
id="language-select"
|
||
className="language-select"
|
||
value={selectedLanguage}
|
||
onChange={(e) => setSelectedLanguage(e.target.value)}
|
||
>
|
||
<option value="zh">{t('languages.zh')}</option>
|
||
<option value="en">{t('languages.en')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="language-modal-footer">
|
||
<button
|
||
className="language-modal-cancel"
|
||
onClick={handleCancel}
|
||
>
|
||
{t('languageSwitch.cancel')}
|
||
</button>
|
||
<button
|
||
className="language-modal-submit"
|
||
onClick={handleSubmit}
|
||
>
|
||
{t('languageSwitch.submit')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default LanguageSwitchModal |