Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";

export const EmojiActivity = (props) => {

  // props destructuring

  const { onClickEmoji, hidden } = props;

  return (

    <div

      className="smiley-panel-body"

      style={{ display: hidden ? "block" : "none" }}

    >

      <div className="emoji-activity">

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f47e"

          data-shortname=":space_invader:"

          data-index="1"

          title="alien monster"

          data-eid="445"

        >

          <span className="emojione emojione-1f47e"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f574"

          data-shortname=":levitate:"

          data-index="2"

          title="man in business suit levitating"

          data-eid="1216"

        >

          <span className="emojione emojione-1f574"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f93a"

          data-shortname=":fencer:"

          data-index="3"

          title="fencer"

          data-eid="2313"

        >

          <span className="emojione emojione-1f93a"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c7"

          data-tone="0"

          data-shortname=":horse_racing:"

          data-index="4"

          title="horse racing"

          data-eid="804"

        >

          <span className="emojione emojione-1f3c7"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="26f7"

          data-shortname=":skier:"

          data-index="5"

          title="skier"

          data-eid="1688"

        >

          <span className="emojione emojione-26f7"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c2"

          data-shortname=":snowboarder:"

          data-index="6"

          title="snowboarder"

          data-eid="320"

        >

          <span className="emojione emojione-1f3c2"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3cc"

          data-shortname=":golfer:"

          data-index="7"

          title="golfer"

          data-eid="1076"

        >

          <span className="emojione emojione-1f3cc"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c4"

          data-tone="0"

          data-shortname=":surfer:"

          data-index="8"

          title="surfer"

          data-eid="322"

        >

          <span className="emojione emojione-1f3c4"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f6a3"

          data-tone="0"

          data-shortname=":rowboat:"

          data-index="9"

          title="rowboat"

          data-eid="771"

        >

          <span className="emojione emojione-1f6a3"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3ca"

          data-tone="0"

          data-shortname=":swimmer:"

          data-index="10"

          title="swimmer"

          data-eid="325"

        >

          <span className="emojione emojione-1f3ca"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="26f9"

          data-tone="0"

          data-shortname=":basketball_player:"

          data-index="11"

          title="person with ball"

          data-eid="1690"

        >

          <span className="emojione emojione-26f9"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3cb"

          data-tone="0"

          data-shortname=":lifter:"

          data-index="12"

          title="weight lifter"

          data-eid="1075"

        >

          <span className="emojione emojione-1f3cb"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f6b4"

          data-tone="0"

          data-shortname=":bicyclist:"

          data-index="13"

          title="bicyclist"

          data-eid="778"

        >

          <span className="emojione emojione-1f6b4"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f6b5"

          data-tone="0"

          data-shortname=":mountain_bicyclist:"

          data-index="14"

          title="mountain bicyclist"

          data-eid="779"

        >

          <span className="emojione emojione-1f6b5"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f938"

          data-shortname=":cartwheel:"

          data-index="15"

          title="person doing cartwheel"

          data-eid="2305"

        >

          <span className="emojione emojione-1f938"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f93c"

          data-shortname=":wrestlers:"

          data-index="16"

          title="wrestlers"

          data-eid="2307"

        >

          <span className="emojione emojione-1f93c"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f93d"

          data-shortname=":water_polo:"

          data-index="17"

          title="water polo"

          data-eid="2310"

        >

          <span className="emojione emojione-1f93d"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f93e"

          data-shortname=":handball:"

          data-index="18"

          title="handball"

          data-eid="2311"

        >

          <span className="emojione emojione-1f93e"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f939"

          data-shortname=":juggling:"

          data-index="19"

          title="juggling"

          data-eid="2306"

        >

          <span className="emojione emojione-1f939"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3aa"

          data-shortname=":circus_tent:"

          data-index="20"

          title="circus tent"

          data-eid="296"

        >

          <span className="emojione emojione-1f3aa"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3ad"

          data-shortname=":performing_arts:"

          data-index="21"

          title="performing arts"

          data-eid="299"

        >

          <span className="emojione emojione-1f3ad"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3a8"

          data-shortname=":art:"

          data-index="22"

          title="artist palette"

          data-eid="294"

        >

          <span className="emojione emojione-1f3a8"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b0"

          data-shortname=":slot_machine:"

          data-index="23"

          title="slot machine"

          data-eid="302"

        >

          <span className="emojione emojione-1f3b0"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f6c0"

          data-tone="0"

          data-shortname=":bath:"

          data-index="24"

          title="bath"

          data-eid="722"

        >

          <span className="emojione emojione-1f6c0"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f397"

          data-shortname=":reminder_ribbon:"

          data-index="25"

          title="reminder ribbon"

          data-eid="1082"

        >

          <span className="emojione emojione-1f397"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f39f"

          data-shortname=":tickets:"

          data-index="26"

          title="admission tickets"

          data-eid="1073"

        >

          <span className="emojione emojione-1f39f"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3ab"

          data-shortname=":ticket:"

          data-index="27"

          title="ticket"

          data-eid="297"

        >

          <span className="emojione emojione-1f3ab"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f396"

          data-shortname=":military_medal:"

          data-index="28"

          title="military medal"

          data-eid="1081"

        >

          <span className="emojione emojione-1f396"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c6"

          data-shortname=":trophy:"

          data-index="29"

          title="trophy"

          data-eid="323"

        >

          <span className="emojione emojione-1f3c6"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c5"

          data-shortname=":medal:"

          data-index="30"

          title="sports medal"

          data-eid="1074"

        >

          <span className="emojione emojione-1f3c5"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f947"

          data-shortname=":first_place:"

          data-index="31"

          title="first place medal"

          data-eid="2314"

        >

          <span className="emojione emojione-1f947"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f948"

          data-shortname=":second_place:"

          data-index="32"

          title="second place medal"

          data-eid="2315"

        >

          <span className="emojione emojione-1f948"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f949"

          data-shortname=":third_place:"

          data-index="33"

          title="third place medal"

          data-eid="2316"

        >

          <span className="emojione emojione-1f949"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="26bd"

          data-shortname=":soccer:"

          data-index="34"

          title="soccer ball"

          data-eid="78"

        >

          <span className="emojione emojione-26bd"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="26be"

          data-shortname=":baseball:"

          data-index="35"

          title="baseball"

          data-eid="79"

        >

          <span className="emojione emojione-26be"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c0"

          data-shortname=":basketball:"

          data-index="36"

          title="basketball and hoop"

          data-eid="318"

        >

          <span className="emojione emojione-1f3c0"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3d0"

          data-shortname=":volleyball:"

          data-index="37"

          title="volleyball"

          data-eid="2107"

        >

          <span className="emojione emojione-1f3d0"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c8"

          data-shortname=":football:"

          data-index="38"

          title="american football"

          data-eid="324"

        >

          <span className="emojione emojione-1f3c8"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3c9"

          data-shortname=":rugby_football:"

          data-index="39"

          title="rugby football"

          data-eid="805"

        >

          <span className="emojione emojione-1f3c9"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3be"

          data-shortname=":tennis:"

          data-index="40"

          title="tennis racquet and ball"

          data-eid="316"

        >

          <span className="emojione emojione-1f3be"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b1"

          data-shortname=":8ball:"

          data-index="41"

          title="billiards"

          data-eid="303"

        >

          <span className="emojione emojione-1f3b1"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b3"

          data-shortname=":bowling:"

          data-index="42"

          title="bowling"

          data-eid="305"

        >

          <span className="emojione emojione-1f3b3"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3cf"

          data-shortname=":cricket:"

          data-index="43"

          title="cricket bat and ball"

          data-eid="2106"

        >

          <span className="emojione emojione-1f3cf"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3d1"

          data-shortname=":field_hockey:"

          data-index="44"

          title="field hockey stick and ball"

          data-eid="2108"

        >

          <span className="emojione emojione-1f3d1"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3d2"

          data-shortname=":hockey:"

          data-index="45"

          title="ice hockey stick and puck"

          data-eid="2109"

        >

          <span className="emojione emojione-1f3d2"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3d3"

          data-shortname=":ping_pong:"

          data-index="46"

          title="table tennis paddle and ball"

          data-eid="2110"

        >

          <span className="emojione emojione-1f3d3"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3f8"

          data-shortname=":badminton:"

          data-index="47"

          title="badminton racquet"

          data-eid="2111"

        >

          <span className="emojione emojione-1f3f8"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f94a"

          data-shortname=":boxing_glove:"

          data-index="48"

          title="boxing glove"

          data-eid="2308"

        >

          <span className="emojione emojione-1f94a"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f94b"

          data-shortname=":martial_arts_uniform:"

          data-index="49"

          title="martial arts uniform"

          data-eid="2309"

        >

          <span className="emojione emojione-1f94b"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f945"

          data-shortname=":goal:"

          data-index="50"

          title="goal net"

          data-eid="2312"

        >

          <span className="emojione emojione-1f945"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3af"

          data-shortname=":dart:"

          data-index="51"

          title="direct hit"

          data-eid="301"

        >

          <span className="emojione emojione-1f3af"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="26f3"

          data-shortname=":golf:"

          data-index="52"

          title="flag in hole"

          data-eid="86"

        >

          <span className="emojione emojione-26f3"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="26f8"

          data-shortname=":ice_skate:"

          data-index="53"

          title="ice skate"

          data-eid="1689"

        >

          <span className="emojione emojione-26f8"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3a3"

          data-shortname=":fishing_pole_and_fish:"

          data-index="54"

          title="fishing pole and fish"

          data-eid="289"

        >

          <span className="emojione emojione-1f3a3"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3bd"

          data-shortname=":running_shirt_with_sash:"

          data-index="55"

          title="running shirt with sash"

          data-eid="315"

        >

          <span className="emojione emojione-1f3bd"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3bf"

          data-shortname=":ski:"

          data-index="56"

          title="ski and ski boot"

          data-eid="317"

        >

          <span className="emojione emojione-1f3bf"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3ae"

          data-shortname=":video_game:"

          data-index="57"

          title="video game"

          data-eid="300"

        >

          <span className="emojione emojione-1f3ae"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b2"

          data-shortname=":game_die:"

          data-index="58"

          title="game die"

          data-eid="304"

        >

          <span className="emojione emojione-1f3b2"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3bc"

          data-shortname=":musical_score:"

          data-index="59"

          title="musical score"

          data-eid="314"

        >

          <span className="emojione emojione-1f3bc"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3a4"

          data-shortname=":microphone:"

          data-index="60"

          title="microphone"

          data-eid="290"

        >

          <span className="emojione emojione-1f3a4"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3a7"

          data-shortname=":headphones:"

          data-index="61"

          title="headphone"

          data-eid="293"

        >

          <span className="emojione emojione-1f3a7"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b7"

          data-shortname=":saxophone:"

          data-index="62"

          title="saxophone"

          data-eid="309"

        >

          <span className="emojione emojione-1f3b7"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b8"

          data-shortname=":guitar:"

          data-index="63"

          title="guitar"

          data-eid="310"

        >

          <span className="emojione emojione-1f3b8"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3b9"

          data-shortname=":musical_keyboard:"

          data-index="64"

          title="musical keyboard"

          data-eid="311"

        >

          <span className="emojione emojione-1f3b9"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3ba"

          data-shortname=":trumpet:"

          data-index="65"

          title="trumpet"

          data-eid="312"

        >

          <span className="emojione emojione-1f3ba"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3bb"

          data-shortname=":violin:"

          data-index="66"

          title="violin"

          data-eid="313"

        >

          <span className="emojione emojione-1f3bb"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f941"

          data-shortname=":drum:"

          data-index="67"

          title="drum with drumsticks"

          data-eid="2317"

        >

          <span className="emojione emojione-1f941"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3ac"

          data-shortname=":clapper:"

          data-index="68"

          title="clapper board"

          data-eid="298"

        >

          <span className="emojione emojione-1f3ac"></span>

        </span>

        <span

          className="e1"

          onClick={(e) => onClickEmoji(e)}

          tabIndex="-1"

          id="1f3f9"

          data-shortname=":bow_and_arrow:"

          data-index="69"

          title="bow and arrow"

          data-eid="2098"

        >

          <span className="emojione emojione-1f3f9"></span>

        </span>

      </div>

    </div>

  );

};