@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleDetail/FAQArticleNotFound.js

Smart FAQ

// @flow
import * as React from 'react';
import { Heading, Text, Button } from '@kiwicom/orbit-components';
import { withRouter } from 'react-router-dom';
import css from 'styled-jsx/css';
import Translate from '@kiwicom/nitro/lib/components/Translate';

const style = css`
  .notFoundContainer {
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
  }
  .textMargin {
    margin-top: 10px;
    margin-bottom: 40px;
  }
`;

type Props = {
  history: {
    push: string => void,
  },
};

class ArticleNotFound extends React.Component<Props> {
  goToFAQ = () => {
    this.props.history.push('/faq');
  };
  render() {
    return (
      <div className="notFoundContainer">
        <div>
          <Heading>
            <Translate t={__('smartfaq.faq.article.not_found.title')} />
          </Heading>
          <div className="textMargin">
            <Text>
              <Translate t={__('smartfaq.faq.article.not_found.description')} />
            </Text>
          </div>
          <Button onClick={this.goToFAQ}>
            <Translate
              t={__('smartfaq.faq.article.not_found.link_to_help_center')}
            />
          </Button>
        </div>
        <style jsx>{style}</style>
      </div>
    );
  }
}

export default withRouter(ArticleNotFound);