Updated settings components and date filter.

This commit is contained in:
Mike Cao 2023-01-10 17:18:59 -08:00
parent 70ef857dc7
commit 4b5b4db108
16 changed files with 172 additions and 194 deletions

View file

@ -1,30 +1,28 @@
import { FormattedMessage } from 'react-intl';
import DropDown from 'components/common/DropDown';
import { Button } from 'react-basics';
import { useIntl, defineMessages } from 'react-intl';
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
import useLocale from 'hooks/useLocale';
import { DEFAULT_LOCALE } from 'lib/constants';
import styles from './TimezoneSetting.module.css';
import { languages } from 'lib/lang';
const messages = defineMessages({
reset: { id: 'label.reset', defaultMessage: 'Reset' },
});
export default function LanguageSetting() {
const { formatMessage } = useIntl();
const { locale, saveLocale } = useLocale();
const options = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
const options = Object.keys(languages);
function handleReset() {
saveLocale(DEFAULT_LOCALE);
}
return (
<>
<DropDown
menuClassName={styles.menu}
value={locale}
options={options}
onChange={saveLocale}
/>
<Button className={styles.button} size="sm" onClick={handleReset}>
<FormattedMessage id="label.reset" defaultMessage="Reset" />
</Button>
</>
<Flexbox gap={10} style={{ width: 400 }}>
<Dropdown items={options} value={locale} onChange={saveLocale}>
{item => <Item key={item}>{languages[item].label}</Item>}
</Dropdown>
<Button onClick={handleReset}>{formatMessage(messages.reset)}</Button>
</Flexbox>
);
}