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

challenges page on desktop

Browse Source
This commit is contained in:
mattyl006 2022-07-14 11:45:45 +02:00
parent f8463fe60d
commit 25d5b9d772
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Challanges/Challenges.js
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import {H1} from "../../utils/fonts"; import {Body, H1} from "../../utils/fonts";
import {FlexColumn} from "../../utils/containers"; import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
import Search from "../../components/elements/Search"; import Search from "../../components/elements/Search";
import Pager from "../../components/elements/Pager"; import Pager from "../../components/elements/Pager";
import {ELEMENTS_PER_PAGE} from "../../utils/globals"; import {ELEMENTS_PER_PAGE} from "../../utils/globals";
@ -10,6 +10,7 @@ import _challengesRequest from "./_challengesRequest";
import _renderChallenges from "./_renderChallenges"; import _renderChallenges from "./_renderChallenges";
import Media from "react-media"; import Media from "react-media";
import theme from "../../utils/theme"; import theme from "../../utils/theme";
import cupIco from '../../assets/cup_ico.svg';
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
@ -112,10 +113,19 @@ const Challenges = () => {
<FlexColumn as='main' alignmentY='flex-start' width='100%' <FlexColumn as='main' alignmentY='flex-start' width='100%'
minHeight='100vh' padding='112px 0 82px 310px'> minHeight='100vh' padding='112px 0 82px 310px'>
<FlexColumn alignmentX='flex-start'> <FlexColumn alignmentX='flex-start'>
<H1 as='h1' margin='0 0 32px 0'> <FlexRow width='100%' gap='32px'>
Challenges <FlexColumn alignmentX='flex-start' gap='32px' width='75%' maxWidth='720px'>
</H1> <H1 as='h1'>
<Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/> Challenges
</H1>
<Body margin='0 0 12px 0' maxWidth='400px'>
Increase your machine learning skills by competing in our exciting challenges.
</Body>
<Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/>
</FlexColumn>
<Svg src={cupIco} size='contain' width='25%'
height='160px' backgroundColor={theme.colors.green}/>
</FlexRow>
<FlexColumn width='100%'> <FlexColumn width='100%'>
{renderChallenges()} {renderChallenges()}
</FlexColumn> </FlexColumn>