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 React from "react";
|
||||||
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
|
import {FlexColumn} from "../../utils/containers";
|
||||||
import {Body, H2, Medium} from "../../utils/fonts";
|
import {Body, H2, Medium} from "../../utils/fonts";
|
||||||
import Media from "react-media";
|
import Media from "react-media";
|
||||||
import theme from "../../utils/theme";
|
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 getChallengeFullDescription from "../../api/getChallengeFullDescription";
|
||||||
import {markdown} from "markdown";
|
import {markdown} from "markdown";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import InfoList from "../elements/InfoList";
|
||||||
|
|
||||||
const ReadmeStyle = styled(Body)`
|
const ReadmeStyle = styled(Body)`
|
||||||
h3 {
|
h3 {
|
||||||
@ -66,50 +60,7 @@ const Readme = (props) => {
|
|||||||
<H2 as='h2'>
|
<H2 as='h2'>
|
||||||
Info
|
Info
|
||||||
</H2>
|
</H2>
|
||||||
<FlexColumn gap='10px' as='ul' alignmentX='flex-start'>
|
<InfoList iconsSize='24px'/>
|
||||||
<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>
|
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<FlexColumn alignmentX='flex-start' maxWidth='260px'>
|
<FlexColumn alignmentX='flex-start' maxWidth='260px'>
|
||||||
<H2 as='h2'>
|
<H2 as='h2'>
|
||||||
@ -148,51 +99,7 @@ const Readme = (props) => {
|
|||||||
<H2 as='h2'>
|
<H2 as='h2'>
|
||||||
Info
|
Info
|
||||||
</H2>
|
</H2>
|
||||||
<FlexColumn as='ul' gap='10px' padding='24px 30px' shadow={theme.shadow}
|
<InfoList iconsSize='32px'/>
|
||||||
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>
|
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
<FlexColumn alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
||||||
<H2 as='h2'>
|
<H2 as='h2'>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user