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>
  );
};