add language selector to settings
This commit is contained in:
parent
ed0b6c2b17
commit
9ff76e4198
|
@ -5,12 +5,12 @@ import ChartMiddleOBRight from '@components/icons/ChartMiddleOBRight'
|
||||||
import ChartOnLeft from '@components/icons/ChartOnLeft'
|
import ChartOnLeft from '@components/icons/ChartOnLeft'
|
||||||
import ChartOnRight from '@components/icons/ChartOnRight'
|
import ChartOnRight from '@components/icons/ChartOnRight'
|
||||||
import Tooltip from '@components/shared/Tooltip'
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
// import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
// import { useRouter } from 'next/router'
|
import { useCallback } from 'react'
|
||||||
// import { useCallback } from 'react'
|
import { useRouter } from 'next/router'
|
||||||
import {
|
import {
|
||||||
NOTIFICATION_POSITION_KEY,
|
NOTIFICATION_POSITION_KEY,
|
||||||
SIZE_INPUT_UI_KEY,
|
SIZE_INPUT_UI_KEY,
|
||||||
|
@ -28,17 +28,17 @@ const NOTIFICATION_POSITIONS = [
|
||||||
const TRADING_CHARTS = ['custom', 'trading-view']
|
const TRADING_CHARTS = ['custom', 'trading-view']
|
||||||
const TRADE_FORM_UI = ['slider', 'buttons']
|
const TRADE_FORM_UI = ['slider', 'buttons']
|
||||||
|
|
||||||
// const LANGS = [
|
const LANGS = [
|
||||||
// { locale: 'en', name: 'english', description: 'english' },
|
{ locale: 'en', name: 'english', description: 'english' },
|
||||||
// { locale: 'ru', name: 'russian', description: 'russian' },
|
// { locale: 'ru', name: 'russian', description: 'russian' },
|
||||||
// { locale: 'es', name: 'spanish', description: 'spanish' },
|
// { locale: 'es', name: 'spanish', description: 'spanish' },
|
||||||
// {
|
{
|
||||||
// locale: 'zh_tw',
|
locale: 'zh_tw',
|
||||||
// name: 'chinese-traditional',
|
name: 'chinese-traditional',
|
||||||
// description: 'traditional chinese',
|
description: 'traditional chinese',
|
||||||
// },
|
},
|
||||||
// { locale: 'zh', name: 'chinese', description: 'simplified chinese' },
|
// { locale: 'zh', name: 'chinese', description: 'simplified chinese' },
|
||||||
// ]
|
]
|
||||||
|
|
||||||
export const THEMES = [
|
export const THEMES = [
|
||||||
'light',
|
'light',
|
||||||
|
@ -56,9 +56,12 @@ export const THEMES = [
|
||||||
const DisplaySettings = () => {
|
const DisplaySettings = () => {
|
||||||
const { t } = useTranslation(['common', 'settings'])
|
const { t } = useTranslation(['common', 'settings'])
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
// const [savedLanguage, setSavedLanguage] = useLocalStorageState('language', '')
|
const [savedLanguage, setSavedLanguage] = useLocalStorageState(
|
||||||
// const router = useRouter()
|
'language',
|
||||||
// const { pathname, asPath, query } = router
|
'en'
|
||||||
|
)
|
||||||
|
const router = useRouter()
|
||||||
|
const { pathname, asPath, query } = router
|
||||||
const [notificationPosition, setNotificationPosition] = useLocalStorageState(
|
const [notificationPosition, setNotificationPosition] = useLocalStorageState(
|
||||||
NOTIFICATION_POSITION_KEY,
|
NOTIFICATION_POSITION_KEY,
|
||||||
'bottom-left'
|
'bottom-left'
|
||||||
|
@ -76,14 +79,14 @@ const DisplaySettings = () => {
|
||||||
'chartLeft'
|
'chartLeft'
|
||||||
)
|
)
|
||||||
|
|
||||||
// const handleLangChange = useCallback(
|
const handleLangChange = useCallback(
|
||||||
// (l: string) => {
|
(l: string) => {
|
||||||
// setSavedLanguage(l)
|
setSavedLanguage(l)
|
||||||
// router.push({ pathname, query }, asPath, { locale: l })
|
router.push({ pathname, query }, asPath, { locale: l })
|
||||||
// dayjs.locale(l == 'zh_tw' ? 'zh-tw' : l)
|
dayjs.locale(l == 'zh_tw' ? 'zh-tw' : l)
|
||||||
// },
|
},
|
||||||
// [router]
|
[router, pathname, query, asPath, setSavedLanguage]
|
||||||
// )
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -106,7 +109,7 @@ const DisplaySettings = () => {
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
|
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
|
||||||
<p className="mb-2 md:mb-0">{t('settings:language')}</p>
|
<p className="mb-2 md:mb-0">{t('settings:language')}</p>
|
||||||
<div className="w-full min-w-[330px] md:w-[480px] md:pl-4">
|
<div className="w-full min-w-[330px] md:w-[480px] md:pl-4">
|
||||||
<ButtonGroup
|
<ButtonGroup
|
||||||
|
@ -116,7 +119,7 @@ const DisplaySettings = () => {
|
||||||
names={LANGS.map((val) => t(`settings:${val.name}`))}
|
names={LANGS.map((val) => t(`settings:${val.name}`))}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
<div className="hidden border-t border-th-bkg-3 py-4 md:flex md:flex-row md:items-center md:justify-between md:px-4">
|
<div className="hidden border-t border-th-bkg-3 py-4 md:flex md:flex-row md:items-center md:justify-between md:px-4">
|
||||||
<p className="mb-2 md:mb-0">{t('settings:notification-position')}</p>
|
<p className="mb-2 md:mb-0">{t('settings:notification-position')}</p>
|
||||||
<div className="w-full min-w-[140px] md:w-auto">
|
<div className="w-full min-w-[140px] md:w-auto">
|
||||||
|
|
Loading…
Reference in New Issue