import React from "react"; import {Container, FlexColumn, FlexRow, Grid, Svg} from "../../utils/containers"; import {Body, H3} from "../../utils/fonts"; import styled from "styled-components"; import IconLabel from "./IconLabel"; const ChallengeStyle = styled(FlexColumn)` padding: 12px; border: 1px solid ${({theme}) => theme.colors.dark05}; cursor: pointer; transition: transform 0.3s ease-in-out; p { width: 80%; } * { cursor: pointer; } &:hover { transform: scale(1.05); } `; const Line = styled(Container)` height: 1px; width: 85%; background-color: ${({theme}) => theme.colors.dark05}; margin-bottom: 14px; `; 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.describe} {props.metric} {props.bestScore} {props.timeLeft} {props.baseline} {props.prize} ); } export default MiniChallenge;