refactor Readme section component
This commit is contained in:
parent
f33694654b
commit
f5d15d5998
18
src/components/elements/InfoItem.js
Normal file
18
src/components/elements/InfoItem.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import {FlexRow, Svg} from "../../utils/containers";
|
||||
import theme from "../../utils/theme";
|
||||
import {Medium} from "../../utils/fonts";
|
||||
|
||||
const InfoItem = (props) => {
|
||||
return (
|
||||
<FlexRow as='li' gap={props.gap}>
|
||||
<Svg src={props.icon} width={props.size} height={props.size}
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
{props.children ? props.children : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
);
|
||||
}
|
||||
|
||||
export default InfoItem;
|
||||
57
src/components/elements/InfoList.js
Normal file
57
src/components/elements/InfoList.js
Normal file
@ -0,0 +1,57 @@
|
||||
import React from "react";
|
||||
import {FlexColumn} from "../../utils/containers";
|
||||
import InfoItem from "./InfoItem";
|
||||
import textIco from "../../assets/text_ico.svg";
|
||||
import metricIco from "../../assets/metric_ico.svg";
|
||||
import bestScoreIco from "../../assets/cup_ico.svg";
|
||||
import baselineIco from "../../assets/baseline_ico.svg";
|
||||
import timeIco from "../../assets/clock_ico.svg";
|
||||
import {RENDER_DEADLINE_TIME} from "../../utils/globals";
|
||||
import coinsIco from "../../assets/coins_ico.svg";
|
||||
import Media from "react-media";
|
||||
import theme from "../../utils/theme";
|
||||
|
||||
const InfoList = (props) => {
|
||||
const itemsRender = (gap, iconsSize) => {
|
||||
return (
|
||||
<>
|
||||
<InfoItem icon={textIco} gap={gap} size={iconsSize}>
|
||||
The word-processing challenge
|
||||
</InfoItem>
|
||||
<InfoItem icon={metricIco} gap={gap} size={iconsSize}>
|
||||
Metrics: {props.metric ? props.metric : 'xxx'}
|
||||
</InfoItem>
|
||||
<InfoItem icon={bestScoreIco} gap={gap} size={iconsSize}>
|
||||
Best score: {props.bestScore ? props.bestScore : 'xxx'}
|
||||
</InfoItem>
|
||||
<InfoItem icon={baselineIco} gap={gap} size={iconsSize}>
|
||||
Baseline: {props.baseline ? props.baseline : 'xxx'}
|
||||
</InfoItem>
|
||||
<InfoItem icon={timeIco} gap={gap} size={iconsSize}>
|
||||
Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
|
||||
</InfoItem>
|
||||
<InfoItem icon={coinsIco} gap={gap} size={iconsSize}>
|
||||
Prize: {props.prize ? props.prize : 'xxx'}
|
||||
</InfoItem>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
<FlexColumn gap='10px' as='ul' alignmentX='flex-start'>
|
||||
{itemsRender('10px', props.iconsSize)}
|
||||
</FlexColumn>
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
<FlexColumn as='ul' gap='10px' padding='24px 30px' shadow={theme.shadow}
|
||||
alignmentX='flex-start' border={`1px solid ${theme.colors.dark05}`}>
|
||||
{itemsRender('20px', props.iconsSize)}
|
||||
</FlexColumn>
|
||||
</Media>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default InfoList;
|
||||
@ -1,18 +1,12 @@
|
||||
import React from "react";
|
||||
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
|
||||
import {FlexColumn} from "../../utils/containers";
|
||||
import {Body, H2, Medium} from "../../utils/fonts";
|
||||
import Media from "react-media";
|
||||
import theme from "../../utils/theme";
|
||||
import baselineIco from '../../assets/baseline_ico.svg';
|
||||
import bestScoreIco from '../../assets/cup_ico.svg';
|
||||
import timeIco from '../../assets/clock_ico.svg';
|
||||
import metricIco from '../../assets/metric_ico.svg';
|
||||
import coinsIco from '../../assets/coins_ico.svg';
|
||||
import textIco from '../../assets/text_ico.svg';
|
||||
import {RENDER_DEADLINE_TIME} from "../../utils/globals";
|
||||
import getChallengeFullDescription from "../../api/getChallengeFullDescription";
|
||||
import {markdown} from "markdown";
|
||||
import styled from "styled-components";
|
||||
import InfoList from "../elements/InfoList";
|
||||
|
||||
const ReadmeStyle = styled(Body)`
|
||||
h3 {
|
||||
@ -66,50 +60,7 @@ const Readme = (props) => {
|
||||
<H2 as='h2'>
|
||||
Info
|
||||
</H2>
|
||||
<FlexColumn gap='10px' as='ul' alignmentX='flex-start'>
|
||||
<FlexRow gap='10px' as='li'>
|
||||
<Svg src={textIco} width='24px' height='24px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
The word-processing challenge
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='10px' as='li'>
|
||||
<Svg src={metricIco} width='24px' height='24px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Metrics: {props.metric ? props.metric : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='10px' as='li'>
|
||||
<Svg src={bestScoreIco} width='24px' height='24px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Best score: {props.bestScore ? props.bestScore : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='10px' as='li'>
|
||||
<Svg src={baselineIco} width='24px' height='24px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Baseline: {props.baseline ? props.baseline : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='10px' as='li'>
|
||||
<Svg src={timeIco} width='24px' height='24px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='10px' as='li'>
|
||||
<Svg src={coinsIco} width='24px' height='24px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Prize: {props.prize ? props.prize : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
<InfoList iconsSize='24px'/>
|
||||
</FlexColumn>
|
||||
<FlexColumn alignmentX='flex-start' maxWidth='260px'>
|
||||
<H2 as='h2'>
|
||||
@ -148,51 +99,7 @@ const Readme = (props) => {
|
||||
<H2 as='h2'>
|
||||
Info
|
||||
</H2>
|
||||
<FlexColumn as='ul' gap='10px' padding='24px 30px' shadow={theme.shadow}
|
||||
alignmentX='flex-start' border={`1px solid ${theme.colors.dark05}`}>
|
||||
<FlexRow gap='20px' as='li'>
|
||||
<Svg src={textIco} width='32px' height='32px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
The word-processing challenge
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='20px' as='li'>
|
||||
<Svg src={metricIco} width='32px' height='32px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Metrics: {props.metric ? props.metric : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='20px' as='li'>
|
||||
<Svg src={bestScoreIco} width='32px' height='32px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Best score: {props.bestScore ? props.bestScore : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='20px' as='li'>
|
||||
<Svg src={baselineIco} width='32px' height='32px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Baseline: {props.baseline ? props.baseline : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='20px' as='li'>
|
||||
<Svg src={timeIco} width='32px' height='32px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
<FlexRow gap='20px' as='li'>
|
||||
<Svg src={coinsIco} width='32px' height='32px'
|
||||
backgroundColor={theme.colors.dark} size='contain'/>
|
||||
<Medium as='p'>
|
||||
Prize: {props.prize ? props.prize : 'xxx'}
|
||||
</Medium>
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
<InfoList iconsSize='32px'/>
|
||||
</FlexColumn>
|
||||
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
||||
<H2 as='h2'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user