12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import {Component} from 'react';
- import styled from '@emotion/styled';
- import {logout} from 'app/actionCreators/account';
- import {Client} from 'app/api';
- import {IconSentry} from 'app/icons';
- import {t} from 'app/locale';
- type Props = {
- showLogout?: boolean;
- maxWidth?: string;
- };
- class NarrowLayout extends Component<Props> {
- UNSAFE_componentWillMount() {
- document.body.classList.add('narrow');
- }
- componentWillUnmount() {
- this.api.clear();
- document.body.classList.remove('narrow');
- }
- private api = new Client();
- handleLogout = () => {
- logout(this.api).then(() => window.location.assign('/auth/login'));
- };
- render() {
- return (
- <div className="app">
- <div className="pattern-bg" />
- <div className="container" style={{maxWidth: this.props.maxWidth}}>
- <div className="box box-modal">
- <div className="box-header">
- <a href="/">
- <IconSentry size="lg" />
- </a>
- {this.props.showLogout && (
- <a className="logout pull-right" onClick={this.handleLogout}>
- <Logout>{t('Sign out')}</Logout>
- </a>
- )}
- </div>
- <div className="box-content with-padding">{this.props.children}</div>
- </div>
- </div>
- </div>
- );
- }
- }
- const Logout = styled('span')`
- font-size: 16px;
- `;
- export default NarrowLayout;
|