国际化 #

import { ChakraProvider, extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  direction: 'ltr',
  locale: 'zh-CN',
})

function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

const theme = extendTheme({
  direction: 'rtl',
})

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box dir="rtl">
        RTL 内容
      </Box>
    </ChakraProvider>
  )
}

import { useColorMode, useTheme } from '@chakra-ui/react'

function DirectionToggle() {
  const { direction, toggleDirection } = useTheme()

  return (
    <Button onClick={toggleDirection}>
      当前方向: {direction}
    </Button>
  )
}

const theme = extendTheme({
  components: {
    Button: {
      defaultProps: {
        loadingText: '加载中...',
      },
    },
    Input: {
      defaultProps: {
        placeholder: '请输入...',
      },
    },
  },
})

import { formatDate } from '@chakra-ui/utils'

function DateDisplay({ date }) {
  const formatted = formatDate(date, { locale: 'zh-CN' })
  
  return <Text>{formatted}</Text>
}

import { useState } from 'react'

const translations = {
  'zh-CN': {
    welcome: '欢迎',
    login: '登录',
    logout: '退出',
  },
  'en-US': {
    welcome: 'Welcome',
    login: 'Login',
    logout: 'Logout',
  },
}

function LanguageSwitcher() {
  const [locale, setLocale] = useState('zh-CN')
  const t = translations[locale]

  return (
    <Box>
      <HStack mb={4}>
        <Button size="sm" onClick={() => setLocale('zh-CN')}>
          中文
        </Button>
        <Button size="sm" onClick={() => setLocale('en-US')}>
          English
        </Button>
      </HStack>
      <Text>{t.welcome}</Text>
      <Button>{t.login}</Button>
    </Box>
  )
}