Whalebird-desktop-client-ma.../renderer/components/Settings.tsx

65 lines
1.6 KiB
TypeScript
Raw Normal View History

2023-12-04 17:17:52 +01:00
import { localeType } from '@/utils/i18n'
2023-12-04 17:08:12 +01:00
import { Label, Modal, Select } from 'flowbite-react'
2023-12-04 17:17:52 +01:00
import { ChangeEvent, useEffect, useState } from 'react'
2023-12-04 17:08:12 +01:00
import { FormattedMessage } from 'react-intl'
type Props = {
opened: boolean
close: () => void
2023-12-04 17:17:52 +01:00
reloadSettings: () => void
2023-12-04 17:08:12 +01:00
}
const languages = [
{
label: 'English',
value: 'en'
},
{
label: '日本語',
value: 'ja'
}
]
export default function Settings(props: Props) {
const [language, setLanguage] = useState<localeType>('en')
useEffect(() => {
if (typeof localStorage !== 'undefined') {
const lang = localStorage.getItem('language')
setLanguage(lang as localeType)
}
}, [])
const languageChanged = (e: ChangeEvent<HTMLSelectElement>) => {
setLanguage(e.target.value as localeType)
if (typeof localStorage !== 'undefined') {
localStorage.setItem('language', e.target.value)
}
2023-12-04 17:17:52 +01:00
props.reloadSettings()
2023-12-04 17:08:12 +01:00
}
return (
<Modal show={props.opened} onClose={props.close}>
<Modal.Header>
<FormattedMessage id="settings.title" />
</Modal.Header>
<Modal.Body>
<div className="mb-2">
<Label htmlFor="language">
<FormattedMessage id="settings.language" />
</Label>
</div>
<div>
<Select id="language" onChange={languageChanged} defaultValue={language}>
{languages.map(lang => (
<option key={lang.value} value={lang.value}>
{lang.label}
</option>
))}
</Select>
</div>
</Modal.Body>
</Modal>
)
}