hover label in IconLabel component

src/components/elements/IconLabel.js

@@ -1,16 +1,86 @@
 import React from "react";
 import {FlexRow, Svg} from "../../utils/containers";
-import {Medium} from "../../utils/fonts";
+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";
+
+const HoverLabel = styled(Body)`
+  position: absolute;
+  top: -32px;
+  left: 0;
+  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) => {
+    switch (type) {
+        case 'metric':
+            return <HoverLabel className='HoverLabel'>
+                metric
+            </HoverLabel>;
+        case 'prize':
+            return <HoverLabel className='HoverLabel'>
+                prize
+            </HoverLabel>;
+        case 'baseline':
+            return <HoverLabel className='HoverLabel'>
+                baseline
+            </HoverLabel>;
+        case 'timeLeft':
+            return <HoverLabel className='HoverLabel'>
+                time left
+            </HoverLabel>;
+        case 'bestScore':
+            return <HoverLabel className='HoverLabel'>
+                best score
+            </HoverLabel>;
+    }
+}
+
+const renderIco = (type) => {
+    switch (type) {
+        case 'metric':
+            return metricIco;
+        case 'prize':
+            return coinsIco;
+        case 'baseline':
+            return baselineIco;
+        case 'timeLeft':
+            return clockIco;
+        case 'bestScore':
+            return cupIco;
+    }
+}
+
+const IconLabelStyle = styled(FlexRow)`
+  position: relative;
+
+  &:hover {
+    .HoverLabel {
+      display: flex;
+    }
+  }
+`
 
 const IconLabel = (props) => {
     return (
-        <FlexRow gap={props.gap}>
+        <IconLabelStyle gap={props.gap}>
             <Svg width={props.size} height={props.size}
-                 src={props.ico}/>
+                 src={renderIco(props.type)}/>
             <Medium as='p'>
                 {props.children}
             </Medium>
-        </FlexRow>
+            {renderHoverLabel(props.type)}
+        </IconLabelStyle>
     );
 }
 

src/components/elements/MiniChallenge.js

@@ -3,11 +3,6 @@ import {Container, FlexColumn, FlexRow, Grid, Svg} from "../../utils/containers"
 import {Body, H3} from "../../utils/fonts";
 import styled from "styled-components";
 import IconLabel from "./IconLabel";
-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';
 
 const ChallengeStyle = styled(FlexColumn)`
   padding: 12px;
@@ -60,19 +55,19 @@ const MiniChallenge = (props) => {
                 {props.describe}
             </Body>
             <IconsGrid>
-                <IconLabel size='24px' gap='8px' ico={metricIco}>
+                <IconLabel size='24px' gap='8px' type={'metric'}>
                     Haversine
                 </IconLabel>
-                <IconLabel size='24px' gap='8px' ico={cupIco}>
+                <IconLabel size='24px' gap='8px' type={'bestScore'}>
                     79%
                 </IconLabel>
-                <IconLabel size='24px' gap='8px' ico={clockIco}>
+                <IconLabel size='24px' gap='8px' type={'timeLeft'}>
                     6 days
                 </IconLabel>
-                <IconLabel size='24px' gap='8px' ico={baselineIco}>
+                <IconLabel size='24px' gap='8px' type={'baseline'}>
                     55%
                 </IconLabel>
-                <IconLabel size='24px' gap='8px' ico={coinsIco}>
+                <IconLabel size='24px' gap='8px' type={'prize'}>
                     150000 PLN
                 </IconLabel>
             </IconsGrid>