umami/components/input/SettingsButton.js
2023-04-21 08:00:42 -07:00

38 lines
1.1 KiB
JavaScript

import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
import styles from './SettingsButton.module.css';
export function SettingsButton() {
const { formatMessage, labels } = useMessages();
return (
<PopupTrigger>
<Button variant="quiet">
<Icon>
<Icons.Gear />
</Icon>
</Button>
<Popup
className={styles.popup}
position="bottom"
alignment="end"
onClick={e => e.stopPropagation()}
>
<Form>
<FormRow label={formatMessage(labels.timezone)}>
<TimezoneSetting />
</FormRow>
<FormRow label={formatMessage(labels.defaultDateRange)}>
<DateRangeSetting />
</FormRow>
</Form>
</Popup>
</PopupTrigger>
);
}
export default SettingsButton;