2022-07-07 15:45:29 +02:00
|
|
|
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;
|
2022-07-08 09:36:10 +02:00
|
|
|
transition: transform 0.3s ease-in-out;
|
2022-07-07 15:45:29 +02:00
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 80%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
2022-07-08 09:36:10 +02:00
|
|
|
transform: scale(1.05);
|
2022-07-07 15:45:29 +02:00
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Line = styled(Container)`
|
|
|
|
|
height: 1px;
|
2022-07-08 11:03:21 +02:00
|
|
|
width: 85%;
|
2022-07-07 15:45:29 +02:00
|
|
|
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 (
|
|
|
|
|
<ChallengeStyle as='article' alignmentX='flex-start'>
|
2022-07-08 11:03:21 +02:00
|
|
|
<FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
|
|
|
|
|
<H3 as='h3' width='85%'>
|
2022-07-07 15:45:29 +02:00
|
|
|
{props.title}
|
|
|
|
|
</H3>
|
2022-07-08 12:22:52 +02:00
|
|
|
<IconLabel type={props.type} size='30px'/>
|
2022-07-07 15:45:29 +02:00
|
|
|
</FlexRow>
|
2022-07-08 11:03:21 +02:00
|
|
|
<Line/>
|
2022-07-07 15:45:29 +02:00
|
|
|
<Body as='p' margin='0 0 14px 0'>
|
|
|
|
|
{props.describe}
|
|
|
|
|
</Body>
|
|
|
|
|
<IconsGrid>
|
2022-07-08 11:55:15 +02:00
|
|
|
<IconLabel size='24px' gap='8px' type={'metric'}>
|
2022-07-08 15:28:52 +02:00
|
|
|
{props.metric}
|
2022-07-07 15:45:29 +02:00
|
|
|
</IconLabel>
|
2022-07-08 11:55:15 +02:00
|
|
|
<IconLabel size='24px' gap='8px' type={'bestScore'}>
|
2022-07-08 15:28:52 +02:00
|
|
|
{props.bestScore}
|
2022-07-07 15:45:29 +02:00
|
|
|
</IconLabel>
|
2022-07-08 11:55:15 +02:00
|
|
|
<IconLabel size='24px' gap='8px' type={'timeLeft'}>
|
2022-07-08 15:28:52 +02:00
|
|
|
{props.timeLeft}
|
2022-07-07 15:45:29 +02:00
|
|
|
</IconLabel>
|
2022-07-08 11:55:15 +02:00
|
|
|
<IconLabel size='24px' gap='8px' type={'baseline'}>
|
2022-07-08 15:28:52 +02:00
|
|
|
{props.baseline}
|
2022-07-07 15:45:29 +02:00
|
|
|
</IconLabel>
|
2022-07-08 11:55:15 +02:00
|
|
|
<IconLabel size='24px' gap='8px' type={'prize'}>
|
2022-07-08 15:28:52 +02:00
|
|
|
{props.prize}
|
2022-07-07 15:45:29 +02:00
|
|
|
</IconLabel>
|
|
|
|
|
</IconsGrid>
|
|
|
|
|
</ChallengeStyle>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default MiniChallenge;
|
