github.com/pingcap/tiflow@v0.0.0-20240520035814-5bf52d54e205/dm/ui/src/layouts/Header.tsx (about)

     1  import React, { useCallback } from 'react'
     2  import { useTranslation } from 'react-i18next'
     3  import { useLocalStorageState } from 'ahooks'
     4  
     5  import { Select, Space } from '~/uikit'
     6  
     7  export default function HeaderNav() {
     8    const { i18n } = useTranslation()
     9    const [lang, setLang] = useLocalStorageState<'en' | 'zh'>('lang', {
    10      defaultValue: 'en',
    11    })
    12  
    13    const handleLangChange = useCallback(
    14      value => {
    15        i18n.changeLanguage(value).then(() => {
    16          setLang(value)
    17        })
    18      },
    19      [i18n]
    20    )
    21  
    22    return (
    23      <div className="flex justify-end">
    24        <Space>
    25          <Select
    26            defaultValue={lang}
    27            className="min-w-70px"
    28            onChange={handleLangChange}
    29          >
    30            <Select.Option value="zh">中文</Select.Option>
    31            <Select.Option value="en">EN</Select.Option>
    32          </Select>
    33        </Space>
    34      </div>
    35    )
    36  }