40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
|
|
import MiniChallenge from '../../components/challenges_list/MiniChallenge';
|
|
import {Grid} from '../../utils/containers';
|
|
import styled from 'styled-components';
|
|
|
|
const ChallengesGrid = styled(Grid)`
|
|
margin: 32px 0;
|
|
grid-gap: 32px 0;
|
|
|
|
@media (min-width: 1200px) {
|
|
margin: 96px 0;
|
|
grid-gap: 64px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
`;
|
|
|
|
const _renderChallenges = (pageNr, challenges) => {
|
|
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
|
if (challenges && challenges !== []) {
|
|
return (
|
|
<ChallengesGrid margin='32px 0' gridGap='32px 0'>
|
|
{challenges.slice(n, n + ELEMENTS_PER_PAGE).map(
|
|
({title, type, description, mainMetric, bestScore, baseline, prize, deadline, name}, index) => {
|
|
return (
|
|
<MiniChallenge key={`challenge-${index}`} title={title} type={type}
|
|
description={description} metric={mainMetric} bestScore={bestScore}
|
|
baseline={baseline} prize={prize} deadline={deadline} name={name}/>
|
|
);
|
|
})}
|
|
</ChallengesGrid>
|
|
);
|
|
}
|
|
return '';
|
|
};
|
|
|
|
export default _renderChallenges; |