Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useState } from "react";
3 
import { EmojiActivity } from "./emojis/EmojiActivity";
4 
import { EmojiFlags } from "./emojis/EmojiFlags";
5 
import { EmojiFood } from "./emojis/EmojiFood";
6 
import { EmojiNature } from "./emojis/EmojiNature";
7 
import { EmojiObjects } from "./emojis/EmojiObjects";
8 
import { EmojiPeople } from "./emojis/EmojiPeople";
9 
import { EmojiSymbols } from "./emojis/EmojiSymbols";
10 
import { EmojiTravel } from "./emojis/EmojiTravel";
11 
 
12 
const Emojione = (props) => {
13 
  const { onClickEmoji } = props;
14 
  const [currentTab, setCurrentTab] = useState("people");
15 
 
16 
  const emojiTabs = {
17 
    activity: "activity",
18 
    flags: "flags",
19 
    food: "food",
20 
    nature: "nature",
21 
    objects: "objects",
22 
    people: "people",
23 
    symbols: "symbols",
24 
    travel: "travel",
25 
  };
26 
 
27 
  const handleChangeTab = (tabToChange) => {
28 
    setCurrentTab(tabToChange);
29 
  };
30 
 
31 
  return (
32 
    <div>
33 
      <div className="smiley-panel">
34 
        <ul
35 
          className="nav customtab2 nav-tabs menu-tabs"
36 
          // style="padding: 0;"
37 
        >
38 
          <li
39 
            className={`menu-item ${
40 
              currentTab === emojiTabs.people ? "active" : ""
41 
            }`}
42 
          >
43 
            <a onClick={() => handleChangeTab(emojiTabs.people)}>
44 
              <i className="ti-face-smile"></i>
45 
            </a>
46 
          </li>
47 
          <li
48 
            className={`menu-item ${
49 
              currentTab === emojiTabs.nature ? "active" : ""
50 
            }`}
51 
          >
52 
            <a onClick={() => handleChangeTab(emojiTabs.nature)}>
53 
              <i className="ti-gallery"></i>
54 
            </a>
55 
          </li>
56 
          <li
57 
            className={`menu-item ${
58 
              currentTab === emojiTabs.food ? "active" : ""
59 
            }`}
60 
          >
61 
            <a onClick={() => handleChangeTab(emojiTabs.food)}>
62 
              <i className="fa fa-cutlery"></i>
63 
            </a>
64 
          </li>
65 
          <li
66 
            className={`menu-item ${
67 
              currentTab === emojiTabs.activity ? "active" : ""
68 
            }`}
69 
          >
70 
            <a onClick={() => handleChangeTab(emojiTabs.activity)}>
71 
              <i className="ti-basketball"></i>
72 
            </a>
73 
          </li>
74 
          <li
75 
            className={`menu-item ${
76 
              currentTab === emojiTabs.travel ? "active" : ""
77 
            }`}
78 
          >
79 
            <a onClick={() => handleChangeTab(emojiTabs.travel)}>
80 
              <i className="fa fa-car"></i>
81 
            </a>
82 
          </li>
83 
          <li
84 
            className={`menu-item ${
85 
              currentTab === emojiTabs.objects ? "active" : ""
86 
            }`}
87 
          >
88 
            <a onClick={() => handleChangeTab(emojiTabs.objects)}>
89 
              <i className="ti-light-bulb"></i>
90 
            </a>
91 
          </li>
92 
          <li
93 
            className={`menu-item ${
94 
              currentTab === emojiTabs.symbols ? "active" : ""
95 
            }`}
96 
          >
97 
            <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
98 
              <i className="ti-heart"></i>
99 
            </a>
100 
          </li>
101 
          <li
102 
            className={`menu-item ${
103 
              currentTab === emojiTabs.flags ? "active" : ""
104 
            }`}
105 
          >
106 
            <a onClick={() => handleChangeTab(emojiTabs.flags)}>
107 
              <i className="ti-flag-alt"></i>
108 
            </a>
109 
          </li>
110 
        </ul>
111 
        <div
112 
          className="tab-content" /* style="margin: 0;text-align: center;" */
113 
        >
114 
          <div role="tabpanel" className="tab-pane active" id=""></div>
115 
        </div>
116 
      </div>
117 
      <EmojiPeople
118 
        onClickEmoji={onClickEmoji}
119 
        hidden={currentTab === emojiTabs.people ? true : false}
120 
      />
121 
      <EmojiNature
122 
        onClickEmoji={onClickEmoji}
123 
        hidden={currentTab === emojiTabs.nature ? true : false}
124 
      />
125 
      <EmojiFood
126 
        onClickEmoji={onClickEmoji}
127 
        hidden={currentTab === emojiTabs.food ? true : false}
128 
      />
129 
      <EmojiActivity
130 
        onClickEmoji={onClickEmoji}
131 
        hidden={currentTab === emojiTabs.activity ? true : false}
132 
      />
133 
      <EmojiTravel
134 
        onClickEmoji={onClickEmoji}
135 
        hidden={currentTab === emojiTabs.travel ? true : false}
136 
      />
137 
      <EmojiObjects
138 
        onClickEmoji={onClickEmoji}
139 
        hidden={currentTab === emojiTabs.objects ? true : false}
140 
      />
141 
      <EmojiSymbols
142 
        onClickEmoji={onClickEmoji}
143 
        hidden={currentTab === emojiTabs.symbols ? true : false}
144 
      />
145 
      <EmojiFlags
146 
        onClickEmoji={onClickEmoji}
147 
        hidden={currentTab === emojiTabs.flags ? true : false}
148 
      />
149 
    </div>
150 
  );
151 
};
152 
 
153 
export default Emojione;