s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor IconLabel to apply label for challenge type ico

Browse Source
This commit is contained in:
mattyl006 2022-07-08 12:22:52 +02:00
parent c990f7970d
commit 52c4c1a087
3 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/elements/IconLabel.js
View File

@ -7,6 +7,9 @@ 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;
@ -22,27 +25,28 @@ const HoverLabel = styled(Body)`
`;
const renderHoverLabel = (type) => {
const hoverLabel = (label) =>
<HoverLabel className='HoverLabel'>
{label}
</HoverLabel>;
switch (type) {
case 'metric':
return <HoverLabel className='HoverLabel'>
metric
</HoverLabel>;
return hoverLabel('metric');
case 'prize':
return <HoverLabel className='HoverLabel'>
prize
</HoverLabel>;
return hoverLabel('prize');
case 'baseline':
return <HoverLabel className='HoverLabel'>
baseline
</HoverLabel>;
return hoverLabel('baseline');
case 'timeLeft':
return <HoverLabel className='HoverLabel'>
time left
</HoverLabel>;
return hoverLabel('time left');
case 'bestScore':
return <HoverLabel className='HoverLabel'>
best score
</HoverLabel>;
return hoverLabel('best score');
case 'text':
return hoverLabel('text data');
case 'image':
return hoverLabel('image data');
case 'tabular':
return hoverLabel('tabular data');
}
}
@ -58,6 +62,12 @@ const renderIco = (type) => {
return clockIco;
case 'bestScore':
return cupIco;
case 'text':
return textIco;
case 'image':
return imageIco;
case 'tabular':
return tabularIco;
}
}
@ -76,9 +86,10 @@ const IconLabel = (props) => {
<IconLabelStyle gap={props.gap}>
<Svg width={props.size} height={props.size}
src={renderIco(props.type)}/>
<Medium as='p'>
{props.children}
</Medium>
{props.children ?
<Medium as='p'>
{props.children}
</Medium> : ''}
{renderHoverLabel(props.type)}
</IconLabelStyle>
);

2
src/components/elements/MiniChallenge.js
View File

@ -48,7 +48,7 @@ const MiniChallenge = (props) => {
<H3 as='h3' width='85%'>
{props.title}
</H3>
<Svg src={props.ico} width='30px' height='30px'/>
<IconLabel type={props.type} size='30px'/>
</FlexRow>
<Line/>
<Body as='p' margin='0 0 14px 0'>

9
src/pages/Challenges.js
View File

@ -3,9 +3,6 @@ import {H1} from "../utils/fonts";
import {FlexColumn, Grid} from "../utils/containers";
import Search from "../components/elements/Search";
import MiniChallenge from "../components/elements/MiniChallenge";
import textIco from '../assets/text_ico.svg';
import tabularIco from '../assets/tabular_ico.svg';
import imageIco from '../assets/image_ico.svg';
import Pager from "../components/elements/Pager";
const Challenges = () => {
@ -19,11 +16,11 @@ const Challenges = () => {
<Search/>
<FlexColumn width='100%'>
<Grid margin='32px 0' gridGap='32px 0'>
<MiniChallenge title='Challenging America geo prediction' ico={textIco}
<MiniChallenge title='Challenging America geo prediction' type={'text'}
describe={`Guess publication location for a piece of text.`}/>
<MiniChallenge title='Challenging America geo prediction' ico={tabularIco}
<MiniChallenge title='Challenging America geo prediction' type={'image'}
describe={`Guess publication location for a piece of text.`}/>
<MiniChallenge title='Challenging America geo prediction' ico={imageIco}
<MiniChallenge title='Challenging America geo prediction' type={'tabular'}
describe={`Guess publication location for a piece of text.`}/>
</Grid>
</FlexColumn>