Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { EmojiActivity } from './emojis/EmojiActivity'
import { EmojiFlags } from './emojis/EmojiFlags'
import { EmojiFood } from './emojis/EmojiFood'
import { EmojiNature } from './emojis/EmojiNature'
import { EmojiObjects } from './emojis/EmojiObjects'
import { EmojiPeople } from './emojis/EmojiPeople'
import { EmojiSymbols } from './emojis/EmojiSymbols'
import { EmojiTravel } from './emojis/EmojiTravel'
import { styled } from 'styled-components'

const StyledEmojiContainer = styled.div`
  background-color: var(--bg-color);
  bottom: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  height: 200px;
  transform: translateZ(0);
  transform-origin: bottom;
  overflow: hidden;
`

const StyledEmojiTabs = styled.ul`
  border-bottom: 1px solid #f7fafc;
  border-top: 1px solid #f7fafc;
  background: #f9f9f9;
  display: flex;
  align-items: center;

  li {
    height: 50px;
    flex: 1;
    cursor: pointer;
    text-align: center;
  }
`

const Emojione = ({ onClickEmoji }) => {
  const [currentTab, setCurrentTab] = useState('people')

  const emojiTabs = {
    activity: 'activity',
    flags: 'flags',
    food: 'food',
    nature: 'nature',
    objects: 'objects',
    people: 'people',
    symbols: 'symbols',
    travel: 'travel',
  }

  const handleChangeTab = (tabToChange) => {
    setCurrentTab(tabToChange)
  }

  return (
    <StyledEmojiContainer>
      <StyledEmojiTabs>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.people ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.people)}>
            <i className="ti-face-smile"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.nature ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.nature)}>
            <i className="ti-gallery"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.food ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.food)}>
            <i className="fa fa-cutlery"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.activity ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.activity)}>
            <i className="ti-basketball"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.travel ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.travel)}>
            <i className="fa fa-car"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.objects ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.objects)}>
            <i className="ti-light-bulb"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.symbols ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
            <i className="ti-heart"></i>
          </a>
        </li>
        <li
          className={`menu-item ${
            currentTab === emojiTabs.flags ? 'active' : ''
          }`}
        >
          <a onClick={() => handleChangeTab(emojiTabs.flags)}>
            <i className="ti-flag-alt"></i>
          </a>
        </li>
      </StyledEmojiTabs>
      <div className="tab-content" /* style="margin: 0;text-align: center;" */>
        <div role="tabpanel" className="tab-pane active" id=""></div>
      </div>

      <EmojiPeople
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.people}
      />
      <EmojiNature
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.nature}
      />
      <EmojiFood
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.food}
      />
      <EmojiActivity
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.activity}
      />
      <EmojiTravel
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.travel}
      />
      <EmojiObjects
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.objects}
      />
      <EmojiSymbols
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.symbols}
      />
      <EmojiFlags
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.flags}
      />
    </StyledEmojiContainer>
  )
}

export default Emojione