This page demo supporting users with multiple languages and timezones.
Current language: unknown
Current timezone: unknown
You can switch the language in the page footer as well.
demo-locale.tsx
import { title } from '../../config.js'
import { Locale, isPreferZh } from '../components/locale.js'
import SourceCode from '../components/source-code.js'
import { PickLanguage } from '../components/ui-language.js'
import { Context, getContextLanguage, getContextTimezone } from '../context.js'
import { o } from '../jsx/jsx.js'
import { Routes } from '../routes.js'
function DemoLocale(attrs: {}, context: Context) {
let lang = getContextLanguage(context) || 'unknown'
let timezone = getContextTimezone(context) || 'unknown'
return (
<div id="demo-locale">
<h1>
<Locale en="Locale Demo" zh="本地化設置示範" />
</h1>
<p>
<Locale
en="This page demo supporting users with multiple languages and timezones."
zh="此頁面示範支援多種語言和時區的使用者。"
/>
</p>
<p>
<Locale en="Current language:" zh="目前語言:" /> {lang}
</p>
<p>
<Locale en="Current timezone:" zh="目前時區:" /> {timezone}
</p>
<PickLanguage />
<p>
<Locale
en="You can switch the language in the page footer as well."
zh="您也可以在頁面底部切換語言。"
/>
</p>
<SourceCode page="demo-locale.tsx" />
</div>
)
}
let routes = {
'/locale': {
menuText: 'Locale',
resolve(context) {
return isPreferZh(context)
? {
title: title('本地化設置示範'),
description: '示範支援多種語言和時區 (i18n)',
node: <DemoLocale />,
}
: {
title: title('Locale Demo'),
description:
'Locale demo for multiple languages and timezone (i18n)',
node: <DemoLocale />,
}
},
},
} satisfies Routes
export default { routes }