@fortawesome/free-solid-svg-icons#faHandsHelping TypeScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faHandsHelping. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: help.tsx From videotranscode.space with Apache License 2.0

5 votes

HoverGuide = ({ close }: { close: () => void }) => (
  <div className="fixed top-0 left-0  w-screen h-full" onClick={() => close()}>
    <div className="flex w-full h-full items-start justify-center">
      <div className="w-3/4 h-full items-start p-20 flex justify-center">
        <div
          className={
            'flex flex-col items-center rounded-lg p-4 leading-normal w-1/2 bg-indigo-900'
          }
          id="keyboard-shortcuts-tour"
          onClick={e => {
            e.stopPropagation()
          }}>
          <div className="flex flex-col max-w-6xl">
            <div className="text-white text-center font-bold text-xl mb-4">
              <FontAwesomeIcon icon={faKeyboard} /> Keyboard shortcuts
            </div>
            {keyboardShorcuts.map(({ key, action }) => {
              return (
                <div
                  key={key}
                  className="flex flex-row py-1 whitespace-normal break-words">
                  <p className="w-1/2 uppercase text-center text-gray-50">
                    {key}
                  </p>
                  <p className="w-1/2 capitalize text-center text-gray-50">
                    {action}
                  </p>
                </div>
              )
            })}
            <div className="text-white text-center font-bold text-xl mb-2 mt-4">
              <FontAwesomeIcon icon={faHandsHelping} /> Need help?
            </div>
            <p className="text-gray-50 text-center">
              Reach out to{' '}
              <a
                className="text-green-500 font-semibold"
                href="mailto:[email protected]">
                [email protected]
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
)