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'

import { Tab, Tabs } from '@mui/material'

import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'

import LandscapeIcon from '@mui/icons-material/Landscape'

import RestaurantIcon from '@mui/icons-material/Restaurant'

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;

  .smiley-panel-body {

    background: #fff;

    border-top: 1px solid var(--border-primary);

    box-sizing: border-box;

    height: 160px;

    padding: 10px 0;

    overflow: auto;

    width: 100%;

    .e1 {

      cursor: pointer;

    }

  }

`

const StyledEmojiTabs = styled(Tabs)`

  min-height: auto !important;

  border-bottom: 1px solid #f7fafc;

  border-top: 1px solid #f7fafc;

  background: #f9f9f9;

  display: flex;

  align-items: center;

  .MuiTabs-indicator {

    background-color: var(--font-color);

  }

`

const StyledTab = styled(Tab)`

  flex-grow: 1;

  color: var(--subtitle-color) !important;

  font-weight: bold !important;

  padding: 0.5rem 1rem !important;

  min-height: auto !important;

  &.Mui-selected {

    color: var(--font-color) !important;

  }

`

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

        value={currentTab}

        onChange={(e, newValue) => handleChangeTab(newValue)}

      >

        <StyledTab

          value={emojiTabs.people}

          icon={<EmojiEmotionsIcon />}

          disableRipple

        />

        <StyledTab

          value={emojiTabs.nature}

          icon={<LandscapeIcon />}

          disableRipple

        />

        <StyledTab

          value={emojiTabs.food}

          icon={<RestaurantIcon />}

          disableRipple

        />

        {/*   <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>

      <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