gonito-frontend/src/components/elements/IconLabel.js

import React from "react";
import {FlexRow, Svg} from "../../utils/containers";
import {Body, Medium} from "../../utils/fonts";
import metricIco from '../../assets/metric_ico.svg';
import coinsIco from '../../assets/coins_ico.svg';
import baselineIco from '../../assets/baseline_ico.svg';
import clockIco from '../../assets/clock_ico.svg';
import cupIco from '../../assets/cup_ico.svg';
import styled from "styled-components";
import textIco from '../../assets/text_ico.svg';
import tabularIco from '../../assets/tabular_ico.svg';
import imageIco from '../../assets/image_ico.svg';

const HoverLabel = styled(Body)`
  position: absolute;
  top: -32px;
  left: ${({type}) => (type === 'text' || type === 'image' || type === 'tabular') ? '-32px' : 0};
  width: 100px;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 4px 12px;
  background-color: ${({theme}) => theme.colors.green};
  color: ${({theme}) => theme.colors.white};
`;

const renderHoverLabel = (type) => {
    const hoverLabel = (label) =>
        <HoverLabel className='HoverLabel' type={type}>
            {label}
        </HoverLabel>;

    switch (type) {
        case 'metric':
            return hoverLabel('metric');
        case 'prize':
            return hoverLabel('prize');
        case 'baseline':
            return hoverLabel('baseline');
        case 'deadline':
            return hoverLabel('deadline');
        case 'bestScore':
            return hoverLabel('best score');
        case 'text':
            return hoverLabel('text data');
        case 'image':
            return hoverLabel('image data');
        case 'tabular':
            return hoverLabel('tabular data');
        default:
            return '';
    }
}

const renderIco = (type) => {
    switch (type) {
        case 'metric':
            return metricIco;
        case 'prize':
            return coinsIco;
        case 'baseline':
            return baselineIco;
        case 'deadline':
            return clockIco;
        case 'bestScore':
            return cupIco;
        case 'text':
            return textIco;
        case 'image':
            return imageIco;
        case 'tabular':
            return tabularIco;
        default:
            return '';
    }
}

const IconLabelStyle = styled(FlexRow)`
  position: relative;

  &:hover {
    .HoverLabel {
      display: flex;
    }
  }
`

const IconLabel = (props) => {
    return (
        <IconLabelStyle gap={props.gap}>
            <Svg width={props.size} height={props.size}
                 src={renderIco(props.type)}/>
            {props.children ?
                <Medium as='p'>
                    {props.children}
                </Medium> : ''}
            {renderHoverLabel(props.type)}
        </IconLabelStyle>
    );
}

export default IconLabel;