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

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import Heading from '@kiwicom/orbit-components/lib/Heading';
import Text from '@kiwicom/nitro/lib/components/Text';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import List, { ListItem } from '@kiwicom/orbit-components/lib/List';
import Card, {
  CardSection,
  CardHeader,
} from '@kiwicom/orbit-components/lib/Card';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import IntlContext from '@kiwicom/nitro/lib/services/intl/context';

import FAQCategoryList from './FAQCategoryList';
import {
  SidebarVersion,
  FullPageVersion,
} from '../../SmartFAQ/common/PageVariant';

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

const Hints = () => (
  <List spaceAfter="medium">
    <ListItem>
      <Translate t="smartfaq.faq.no_search_results.description_1" />
    </ListItem>
    <ListItem>
      <Translate t="smartfaq.faq.no_search_results.description_2" />
    </ListItem>
    <ListItem>
      <Translate t="smartfaq.faq.no_search_results.description_3" />
    </ListItem>
    <ListItem>
      <Translate t="smartfaq.faq.no_search_results.description_4" />
    </ListItem>
  </List>
);

const NoSearchResults = () => {
  const intl = React.useContext(IntlContext);

  return (
    <>
      <SidebarVersion>
        <div className="content">
          <>
            <Stack>
              <Heading type="title3">
                <Translate html t="smartfaq.faq.no_search_results.title" />
              </Heading>
              <Hints />
            </Stack>
            <div className="subTitle">
              <Text
                size="normal"
                weight="bold"
                t="smartfaq.faq.no_search_results.suggestion"
              />
            </div>
          </>
        </div>
        <FAQCategoryList categoryId={null} />
        <style jsx>{styles}</style>
      </SidebarVersion>
      <FullPageVersion>
        <Card>
          <CardHeader
            title={intl.translate(__('smartfaq.faq.no_search_results.title'))}
          />
          <CardSection>
            <Hints />
            <Text t="smartfaq.faq.no_search_results.suggestion" />
          </CardSection>
        </Card>
      </FullPageVersion>
    </>
  );
};

export default NoSearchResults;