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

// @flow

import * as React from 'react';
import styled from 'styled-components';
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 Content = styled.div`
  margin-top: 52px;
  @media only screen and (max-width: 901px) {
    padding-left: 30px;
  }
`;
const SubTitle = styled.div`
  margin-top: 70px;
  margin-bottom: 16px;
  @media only screen and (max-width: 901px) {
    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>
        <Content>
          <>
            <Stack>
              <Heading type="title3">
                <Translate html t="smartfaq.faq.no_search_results.title" />
              </Heading>
              <Hints />
            </Stack>
            <SubTitle>
              <Text
                size="normal"
                weight="bold"
                t="smartfaq.faq.no_search_results.suggestion"
              />
            </SubTitle>
          </>
        </Content>
        <FAQCategoryList categoryId={null} />
      </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;