Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6911 | Rev 6948 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6911 stevensc 1 
import React, { useState } from 'react'
2 
import { EmojiActivity } from './emojis/EmojiActivity'
3 
import { EmojiFlags } from './emojis/EmojiFlags'
4 
import { EmojiFood } from './emojis/EmojiFood'
5 
import { EmojiNature } from './emojis/EmojiNature'
6 
import { EmojiObjects } from './emojis/EmojiObjects'
7 
import { EmojiPeople } from './emojis/EmojiPeople'
8 
import { EmojiSymbols } from './emojis/EmojiSymbols'
9 
import { EmojiTravel } from './emojis/EmojiTravel'
6947 stevensc 10 
import { styled } from 'styled-components'
6911 stevensc 11 
 
6947 stevensc 12 
const StyledEmojiContainer = styled.div`
13 
  background-color: var(--bg-color);
14 
  bottom: 100%;
15 
  left: 0;
16 
  position: absolute;
17 
  width: 100%;
18 
  height: 200px;
19 
  transform: translateZ(0);
20 
  transform-origin: bottom;
21 
  overflow: hidden;
22 
`
23 
 
24 
const StyledEmojiTabs = styled.ul`
25 
  border-bottom: 1px solid #f7fafc;
26 
  border-top: 1px solid #f7fafc;
27 
  background: #f9f9f9;
28 
  display: flex;
29 
  align-items: center;
30 
 
31 
  li {
32 
    height: 50px;
33 
    flex: 1;
34 
    cursor: pointer;
35 
    text-align: center;
36 
  }
37 
`
38 
 
6911 stevensc 39 
const Emojione = ({ onClickEmoji }) => {
40 
  const [currentTab, setCurrentTab] = useState('people')
41 
 
42 
  const emojiTabs = {
43 
    activity: 'activity',
44 
    flags: 'flags',
45 
    food: 'food',
46 
    nature: 'nature',
47 
    objects: 'objects',
48 
    people: 'people',
49 
    symbols: 'symbols',
50 
    travel: 'travel',
51 
  }
52 
 
53 
  const handleChangeTab = (tabToChange) => {
54 
    setCurrentTab(tabToChange)
55 
  }
56 
 
57 
  return (
6947 stevensc 58 
    <StyledEmojiContainer>
59 
      <StyledEmojiTabs>
60 
        <li
61 
          className={`menu-item ${
62 
            currentTab === emojiTabs.people ? 'active' : ''
63 
          }`}
6911 stevensc 64 
        >
6947 stevensc 65 
          <a onClick={() => handleChangeTab(emojiTabs.people)}>
66 
            <i className="ti-face-smile"></i>
67 
          </a>
68 
        </li>
69 
        <li
70 
          className={`menu-item ${
71 
            currentTab === emojiTabs.nature ? 'active' : ''
72 
          }`}
6911 stevensc 73 
        >
6947 stevensc 74 
          <a onClick={() => handleChangeTab(emojiTabs.nature)}>
75 
            <i className="ti-gallery"></i>
76 
          </a>
77 
        </li>
78 
        <li
79 
          className={`menu-item ${
80 
            currentTab === emojiTabs.food ? 'active' : ''
81 
          }`}
82 
        >
83 
          <a onClick={() => handleChangeTab(emojiTabs.food)}>
84 
            <i className="fa fa-cutlery"></i>
85 
          </a>
86 
        </li>
87 
        <li
88 
          className={`menu-item ${
89 
            currentTab === emojiTabs.activity ? 'active' : ''
90 
          }`}
91 
        >
92 
          <a onClick={() => handleChangeTab(emojiTabs.activity)}>
93 
            <i className="ti-basketball"></i>
94 
          </a>
95 
        </li>
96 
        <li
97 
          className={`menu-item ${
98 
            currentTab === emojiTabs.travel ? 'active' : ''
99 
          }`}
100 
        >
101 
          <a onClick={() => handleChangeTab(emojiTabs.travel)}>
102 
            <i className="fa fa-car"></i>
103 
          </a>
104 
        </li>
105 
        <li
106 
          className={`menu-item ${
107 
            currentTab === emojiTabs.objects ? 'active' : ''
108 
          }`}
109 
        >
110 
          <a onClick={() => handleChangeTab(emojiTabs.objects)}>
111 
            <i className="ti-light-bulb"></i>
112 
          </a>
113 
        </li>
114 
        <li
115 
          className={`menu-item ${
116 
            currentTab === emojiTabs.symbols ? 'active' : ''
117 
          }`}
118 
        >
119 
          <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
120 
            <i className="ti-heart"></i>
121 
          </a>
122 
        </li>
123 
        <li
124 
          className={`menu-item ${
125 
            currentTab === emojiTabs.flags ? 'active' : ''
126 
          }`}
127 
        >
128 
          <a onClick={() => handleChangeTab(emojiTabs.flags)}>
129 
            <i className="ti-flag-alt"></i>
130 
          </a>
131 
        </li>
132 
      </StyledEmojiTabs>
133 
      <div className="tab-content" /* style="margin: 0;text-align: center;" */>
134 
        <div role="tabpanel" className="tab-pane active" id=""></div>
6911 stevensc 135 
      </div>
6947 stevensc 136 
 
6911 stevensc 137 
      <EmojiPeople
138 
        onClickEmoji={onClickEmoji}
139 
        hidden={currentTab === emojiTabs.people}
140 
      />
141 
      <EmojiNature
142 
        onClickEmoji={onClickEmoji}
143 
        hidden={currentTab === emojiTabs.nature}
144 
      />
145 
      <EmojiFood
146 
        onClickEmoji={onClickEmoji}
147 
        hidden={currentTab === emojiTabs.food}
148 
      />
149 
      <EmojiActivity
150 
        onClickEmoji={onClickEmoji}
151 
        hidden={currentTab === emojiTabs.activity}
152 
      />
153 
      <EmojiTravel
154 
        onClickEmoji={onClickEmoji}
155 
        hidden={currentTab === emojiTabs.travel}
156 
      />
157 
      <EmojiObjects
158 
        onClickEmoji={onClickEmoji}
159 
        hidden={currentTab === emojiTabs.objects}
160 
      />
161 
      <EmojiSymbols
162 
        onClickEmoji={onClickEmoji}
163 
        hidden={currentTab === emojiTabs.symbols}
164 
      />
165 
      <EmojiFlags
166 
        onClickEmoji={onClickEmoji}
167 
        hidden={currentTab === emojiTabs.flags}
168 
      />
6947 stevensc 169 
    </StyledEmojiContainer>
6911 stevensc 170 
  )
171 
}
172 
 
173 
export default Emojione