gab-social/app/javascript/gabsocial/components/search_popout/search_popout.js

import {  FormattedMessage } from 'react-intl';
import spring from 'react-motion/lib/spring';
import Motion from '../../features/ui/util/optional_motion';
import { searchEnabled } from '../../initial_state';

import './search_popout.scss';

export default class SearchPopout extends PureComponent {

  static propTypes = {
    style: PropTypes.object,
  };

  render() {
    const { style } = this.props;
    
    return (
      <div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
        <Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
          {({ opacity, scaleX, scaleY }) => (
            <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
              <h4>
                <FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' />
              </h4>
              <ul>
                <li>
                  <em>#example</em>
                  <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' />
                </li>
                <li>
                  <em>@username</em>
                  <FormattedMessage id='search_popout.tips.user' defaultMessage='user' />
                </li>
                <li>
                  <em>URL</em>
                  <FormattedMessage id='search_popout.tips.user' defaultMessage='user' />
                </li>
                <li>
                  <em>URL</em>
                  <FormattedMessage id='search_popout.tips.status' defaultMessage='status' />
                </li>
              </ul>
              {
                searchEnabled
                ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favorited, reposted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' />
                : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />
              }
            </div>
          )}
        </Motion>
      </div>
    );
  }

}