diff --git a/locales/en/translation.json b/locales/en/translation.json index 003cad8a..a26c6b02 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -21,9 +21,11 @@ "accounts": { "new": { "title": "Add account", + "domain": "Domain", "sign_in": "Sign in", "authorize": "Authorize" - } + }, + "remove": "Remove" }, "notification": { "favourite": { @@ -105,5 +107,9 @@ "timeline": "Timeline", "followers": "Followers", "followings": "Followings" + }, + "settings": { + "title": "Settings", + "language": "Language" } } diff --git a/renderer/components/Settings.tsx b/renderer/components/Settings.tsx new file mode 100644 index 00000000..da5da0ab --- /dev/null +++ b/renderer/components/Settings.tsx @@ -0,0 +1,64 @@ +import { localeType } from '@/utils/i18n' +import { Label, Modal, Select } from 'flowbite-react' +import { ChangeEvent, useEffect, useState } from 'react' +import { FormattedMessage } from 'react-intl' + +type Props = { + opened: boolean + close: () => void + reloadSettings: () => void +} + +const languages = [ + { + label: 'English', + value: 'en' + }, + { + label: '日本語', + value: 'ja' + } +] + +export default function Settings(props: Props) { + const [language, setLanguage] = useState('en') + + useEffect(() => { + if (typeof localStorage !== 'undefined') { + const lang = localStorage.getItem('language') + setLanguage(lang as localeType) + } + }, []) + + const languageChanged = (e: ChangeEvent) => { + setLanguage(e.target.value as localeType) + if (typeof localStorage !== 'undefined') { + localStorage.setItem('language', e.target.value) + } + props.reloadSettings() + } + + return ( + + + + + +
+ +
+
+ +
+
+
+ ) +} diff --git a/renderer/components/accounts/New.tsx b/renderer/components/accounts/New.tsx index b15b9533..c1f37e4b 100644 --- a/renderer/components/accounts/New.tsx +++ b/renderer/components/accounts/New.tsx @@ -72,7 +72,9 @@ export default function New(props: NewProps) { {sns === null && ( <>
-
+ + +
+
+ ( + + + + )} + placement="right-start" + > + setOpenSettings(true)}> + {' '} +
- ))} - - +
{children} + setOpenSettings(false)} reloadSettings={loadSettings} /> ) diff --git a/renderer/utils/i18n.tsx b/renderer/utils/i18n.tsx index d55206e9..9e0bfba9 100644 --- a/renderer/utils/i18n.tsx +++ b/renderer/utils/i18n.tsx @@ -1,9 +1,10 @@ import en from '../../locales/en/translation.json' +import ja from '../../locales/ja/translation.json' import { flattenMessages } from './flattenMessage' import { createContext, useState } from 'react' import { IntlProvider } from 'react-intl' -export type localeType = 'en' | 'ja' | 'it' | 'pt-BR' | 'fr' +export type localeType = 'en' | 'ja' type Props = { children: React.ReactNode @@ -16,11 +17,15 @@ interface Lang { export const Context = createContext({} as Lang) export const IntlProviderWrapper: React.FC = props => { - const langs = [{ locale: 'en', messages: flattenMessages(en) }] + const langs = [ + { locale: 'en', messages: flattenMessages(en) }, + { locale: 'ja', messages: flattenMessages(ja) } + ] const [lang, setLang] = useState(langs[0]) const switchLang = (locale: string) => { const changeLang = langs.find(lang => lang.locale === locale) + console.log(changeLang) if (changeLang == null) { return }