File "localization-settings.tsx"
Full Path: /home/markqprx/iniasli.pro/client/admin/settings/pages/localization-settings.tsx
File size: 3.58 KB
MIME-type: text/plain
Charset: utf-8
import {FormSelect, Option} from '../../../ui/forms/select/select';
import {SettingsPanel} from '../settings-panel';
import {useValueLists} from '../../../http/value-lists';
import {Section} from '../../../ui/forms/listbox/section';
import {FormRadio} from '../../../ui/forms/radio-group/radio';
import {FormRadioGroup} from '../../../ui/forms/radio-group/radio-group';
import {DateFormatPresets, FormattedDate} from '../../../i18n/formatted-date';
import {FormSwitch} from '../../../ui/forms/toggle/switch';
import {Trans} from '../../../i18n/trans';
import {useCurrentDateTime} from '../../../i18n/use-current-date-time';
import {useTrans} from '@common/i18n/use-trans';
import {message} from '@common/i18n/message';
export function LocalizationSettings() {
const {data} = useValueLists(['timezones', 'localizations']);
const today = useCurrentDateTime();
const {trans} = useTrans();
return (
<SettingsPanel
title={<Trans message="Localization" />}
description={
<Trans message="Configure global date, time and language settings." />
}
>
<FormSelect
className="mb-30"
required
name="client.dates.default_timezone"
showSearchField
selectionMode="single"
label={<Trans message="Default timezone" />}
searchPlaceholder={trans(message('Search timezones'))}
description={
<Trans message="Which timezone should be selected by default for new users and guests." />
}
>
<Option key="auto" value="auto">
<Trans message="Auto" />
</Option>
{Object.entries(data?.timezones || {}).map(([groupName, timezones]) => (
<Section key={groupName} label={groupName}>
{timezones.map(timezone => (
<Option key={timezone.value} value={timezone.value}>
{timezone.text}
</Option>
))}
</Section>
))}
</FormSelect>
<FormSelect
name="client.locale.default"
className="mb-30"
selectionMode="single"
label={<Trans message="Default language" />}
description={
<Trans message="Which localization should be selected by default for new users and guests." />
}
>
<Option key="auto" value="auto">
<Trans message="Auto" />
</Option>
{(data?.localizations || []).map(locale => (
<Option key={locale.language} value={locale.language} capitalizeFirst>
{locale.name}
</Option>
))}
</FormSelect>
<FormRadioGroup
required
className="mb-30"
size="sm"
name="client.dates.format"
orientation="vertical"
label={<Trans message="Date verbosity" />}
description={
<Trans message="Default verbosity for all dates displayed across the site. Month/day order and separators will be adjusted automatically, based on user's locale." />
}
>
<FormRadio key="auto" value="auto">
<Trans message="Auto" />
</FormRadio>
{Object.entries(DateFormatPresets).map(([format, options]) => (
<FormRadio key={format} value={format}>
<FormattedDate date={today} options={options} />
</FormRadio>
))}
</FormRadioGroup>
<FormSwitch
name="client.i18n.enable"
description={
<Trans message="If disabled, site will always be shown in default language and user will not be able to change their locale." />
}
>
<Trans message="Enable translations" />
</FormSwitch>
</SettingsPanel>
);
}