@kiwicom/smart-faq/src/shared/StaticFAQ/NoSearchResults.js

// @flow

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

import FAQCategoryList from './FAQCategoryList';

const styles = css`
  div.title {
    margin-top: 52px;
  }
  ul {
    margin-left: 15px;
  }
  ul li {
    padding-left: 10px;
    margin-left: 10px;
  }
  div.subtitle {
    margin-top: 70px;
    margin-bottom: 16px;
  }
  @media only screen and (max-width: 901px) {
    div.content {
      padding-left: 30px;
    }
    div.subtitle {
      margin-bottom: 10px;
    }
  }
`;

type Props = {
  match: Match,
};

const NoSearchResults = (props: Props) => {
  const categoryId = props.match.params.categoryId || null;
  return (
    <React.Fragment>
      {!categoryId && (
        <div className="content">
          <div className="title">
            <Heading type="title3">
              <Translate html t="smartfaq.faq.no_search_results.title" />
            </Heading>
          </div>
          <ul>
            <li>
              <Text t="smartfaq.faq.no_search_results.description_1" />
            </li>
            <li>
              <Text t="smartfaq.faq.no_search_results.description_2" />
            </li>
            <li>
              <Text t="smartfaq.faq.no_search_results.description_3" />
            </li>
            <li>
              <Text t="smartfaq.faq.no_search_results.description_4" />
            </li>
          </ul>
          <div className="subtitle">
            <Text
              size="normal"
              weight="bold"
              t="smartfaq.faq.no_search_results.suggestion"
            />
          </div>
        </div>
      )}
      <FAQCategoryList categoryId={categoryId} />
      <style jsx>{styles}</style>
    </React.Fragment>
  );
};

export default withRouter(NoSearchResults);