import React from "react"; import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers"; import {Body, H3} from "../../utils/fonts"; import styled from "styled-components"; import IconLabel from "../elements/IconLabel"; import {Link} from "react-router-dom"; import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from "../../utils/globals"; import theme from "../../utils/theme"; import PropsTypes from "prop-types"; const ChallengeStyle = styled(FlexColumn)` padding: 12px; border: 1px solid ${({theme}) => theme.colors.dark05}; cursor: pointer; transition: transform 0.3s ease-in-out; position: relative; max-width: 420px; * { cursor: pointer; } &:hover { transform: scale(1.05); } article { width: 100%; align-items: flex-start; p { width: 80%; } } @media (min-width: ${({theme}) => theme.overMobile}) { width: 360px; padding: 20px; justify-content: flex-start; } `; const IconsGrid = styled(Grid)` width: 100%; grid-gap: 14px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; @media (min-width: 500px) { grid-template-columns: 1fr 1fr 1fr; } `; const MiniChallenge = (props) => { return (

{props.title}

{props.type ? : 'xxx'} {props.description ? MINI_DESCRIPTION_RENDER(props.description) : 'xxx'} {props.metric ? props.metric : 'xxx'} {props.bestScore ? props.bestScore : 'xxx'} {props.deadline ? props.deadline.slice(0, 10) : 'xxx'} {props.baseline ? props.baseline : 'xxx'} {props.prize ? {props.prize} : ''} ); } MiniChallenge.propTypes = { name: PropsTypes.string, title: PropsTypes.string, type: PropsTypes.string, description: PropsTypes.string, metric: PropsTypes.string, bestScore: PropsTypes.string, deadline: PropsTypes.string, baseline: PropsTypes.string, prize: PropsTypes.string }; MiniChallenge.defaultProps = { name: 'xxx', title: 'xxx', type: 'xxx', description: 'xxx', metric: 'xxx', bestScore: 'xxx', deadline: 'xxx', baseline: 'xxx', prize: 'xxx' } export default MiniChallenge;