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

43
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 clockIco from '../../assets/clock_ico.svg';
import cupIco from '../../assets/cup_ico.svg'; import cupIco from '../../assets/cup_ico.svg';
import styled from "styled-components"; 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)` const HoverLabel = styled(Body)`
position: absolute; position: absolute;
@ -22,27 +25,28 @@ const HoverLabel = styled(Body)`
`; `;
const renderHoverLabel = (type) => { const renderHoverLabel = (type) => {
const hoverLabel = (label) =>
<HoverLabel className='HoverLabel'>
{label}
</HoverLabel>;
switch (type) { switch (type) {
case 'metric': case 'metric':
return <HoverLabel className='HoverLabel'> return hoverLabel('metric');
metric
</HoverLabel>;
case 'prize': case 'prize':
return <HoverLabel className='HoverLabel'> return hoverLabel('prize');
prize
</HoverLabel>;
case 'baseline': case 'baseline':
return <HoverLabel className='HoverLabel'> return hoverLabel('baseline');
baseline
</HoverLabel>;
case 'timeLeft': case 'timeLeft':
return <HoverLabel className='HoverLabel'> return hoverLabel('time left');
time left
</HoverLabel>;
case 'bestScore': case 'bestScore':
return <HoverLabel className='HoverLabel'> return hoverLabel('best score');
best score case 'text':
</HoverLabel>; 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; return clockIco;
case 'bestScore': case 'bestScore':
return cupIco; 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}> <IconLabelStyle gap={props.gap}>
<Svg width={props.size} height={props.size} <Svg width={props.size} height={props.size}
src={renderIco(props.type)}/> src={renderIco(props.type)}/>
{props.children ?
<Medium as='p'> <Medium as='p'>
{props.children} {props.children}
</Medium> </Medium> : ''}
{renderHoverLabel(props.type)} {renderHoverLabel(props.type)}
</IconLabelStyle> </IconLabelStyle>
); );

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

@ -48,7 +48,7 @@ const MiniChallenge = (props) => {
<H3 as='h3' width='85%'> <H3 as='h3' width='85%'>
{props.title} {props.title}
</H3> </H3>
<Svg src={props.ico} width='30px' height='30px'/> <IconLabel type={props.type} size='30px'/>
</FlexRow> </FlexRow>
<Line/> <Line/>
<Body as='p' margin='0 0 14px 0'> <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 {FlexColumn, Grid} from "../utils/containers";
import Search from "../components/elements/Search"; import Search from "../components/elements/Search";
import MiniChallenge from "../components/elements/MiniChallenge"; 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"; import Pager from "../components/elements/Pager";
const Challenges = () => { const Challenges = () => {
@ -19,11 +16,11 @@ const Challenges = () => {
<Search/> <Search/>
<FlexColumn width='100%'> <FlexColumn width='100%'>
<Grid margin='32px 0' gridGap='32px 0'> <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.`}/> 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.`}/> 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.`}/> describe={`Guess publication location for a piece of text.`}/>
</Grid> </Grid>
</FlexColumn> </FlexColumn>