import React from 'react';

const SyntaxTab = (): JSX.Element => {
  return (
    <div>
      <div>
        <p>
          Строка запроса разбивается на ряд терминов и операторов. Термин может
          состоять из одного слова -<strong>quick</strong> или
          <strong>brown</strong> - или фраза, заключенная в двойные кавычки -{' '}
          <strong>"quick brown"</strong> - поиск всех слов в заданном порядке.
        </p>

        <h1>Имена полей</h1>
        <p>Вы можете указать поля для поиска в синтаксисе запроса:</p>
        <pre>
          {`
              status: active           # поле статуса содержит активные 
              title:(quick OR brown)   # поле заголовка содержит быстрое или коричневое
              author:"John Smith"      # поле author содержит точную фразу "john smith"
            `}
        </pre>

        <h1>Диапазоны</h1>
        <p>
          Можно указать диапазоны для полей даты, числовых или строковых полей.
          Включаемые в диапазоны значения указываются в квадратных скобках{' '}
          <strong>[min TO max]</strong>, не включаемые в фигурных скобках{' '}
          <strong>minTO max</strong>.
        </p>
        <p>Примеры:</p>
        <pre>
          {`
                count: [1 TO 5]           # Числа 1..5
                date: {* TO 2012-01-01}   # Даты до 2012 г.
                count: [от 1 до 5}        # чисел от 1 до 5, но не включая 5
                age:> 10
                age:> = 10
                age: <10
                age: <= 10
            `}
        </pre>

        <h1>Логические операторы</h1>
        <p>
          Предпочтительные операторы: <strong> + </strong> (это слово должено
          присутствовать) и <strong>- </strong>
          (это слово должжно отсутсвовать). Все остальные условия необязательны.
          Например, такой запрос:
          <pre> quick brown + fox -news </pre>
        </p>
        <p> будет искать: </p>
        <ul>
          <li>
            слово <strong>fox</strong> должено присутствовать
          </li>
          <li>
            слово <strong>news</strong> должно отсутвовать
          </li>
          <li>
            слова <strong>quick</strong> и <strong>brown</strong> необязательны
            - их присутствие увеличивает релевантность.
          </li>
        </ul>
        <p>
          Знакомые логические операторы <strong>AND</strong>,<strong>OR</strong>{' '}
          и <strong>NOT</strong>
          (также записываются как <strong>&&</strong>, <strong>||</strong> и
          <strong>!</strong>) также поддерживаются, но имейте в виду, что они не
          соблюдают обычные правила приоритета, поэтому следует использовать
          круглые скобкив если несколько операторов используются вместе.
          Например, предыдущий запрос можно переписать как:
        </p>
        <pre>((quick AND fox) OR (brown AND fox) OR fox) AND NOT news</pre>
      </div>
    </div>
  );
};

export default SyntaxTab;
