2022-07-07 15:45:29 +02:00
|
|
|
import React from "react";
|
2022-07-12 13:37:28 +02:00
|
|
|
import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers";
|
2022-07-07 15:45:29 +02:00
|
|
|
import {Body, H3} from "../../utils/fonts";
|
|
|
|
|
import styled from "styled-components";
|
|
|
|
|
import IconLabel from "./IconLabel";
|
2022-07-12 16:12:18 +02:00
|
|
|
import {Link} from "react-router-dom";
|
2022-07-14 09:34:56 +02:00
|
|
|
import {CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH} from "../../utils/globals";
|
2022-07-07 15:45:29 +02:00
|
|
|
|
|
|
|
|
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-12 16:12:18 +02:00
|
|
|
position: relative;
|
|
|
|
|
max-width: 420px;
|
2022-07-07 15:45:29 +02:00
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
2022-07-08 09:36:10 +02:00
|
|
|
transform: scale(1.05);
|
2022-07-07 15:45:29 +02:00
|
|
|
}
|
2022-07-12 16:12:18 +02:00
|
|
|
|
2022-07-14 09:34:56 +02:00
|
|
|
article {
|
2022-07-12 16:12:18 +02:00
|
|
|
width: 100%;
|
2022-07-14 09:34:56 +02:00
|
|
|
align-items: flex-start;
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
width: 80%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
|
|
|
width: 360px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
justify-content: flex-start;
|
2022-07-12 16:12:18 +02:00
|
|
|
}
|
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) => {
|
2022-07-12 13:37:28 +02:00
|
|
|
const renderDescription = (description) => {
|
2022-07-14 09:34:56 +02:00
|
|
|
if (description.length <= MINI_DESCRIPTION_LENGTH)
|
2022-07-12 13:37:28 +02:00
|
|
|
return description;
|
2022-07-14 09:34:56 +02:00
|
|
|
return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...`
|
2022-07-12 13:37:28 +02:00
|
|
|
}
|
|
|
|
|
|
2022-07-07 15:45:29 +02:00
|
|
|
return (
|
2022-07-14 09:34:56 +02:00
|
|
|
<ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
|
|
|
|
|
<FlexColumn as='article'>
|
|
|
|
|
<FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
|
|
|
|
|
<H3 as='h3' width='85%'>
|
|
|
|
|
{props.title}
|
|
|
|
|
</H3>
|
|
|
|
|
{props.type ? <IconLabel type={props.type} size='30px'/> : 'xxx'}
|
|
|
|
|
</FlexRow>
|
|
|
|
|
<Line/>
|
|
|
|
|
<Body as='p' margin='0 0 14px 0'>
|
|
|
|
|
{props.description ? renderDescription(props.description) : 'xxx'}
|
|
|
|
|
</Body>
|
|
|
|
|
<IconsGrid>
|
|
|
|
|
<IconLabel size='24px' gap='8px' type='metric'>
|
|
|
|
|
{props.metric ? props.metric : 'xxx'}
|
|
|
|
|
</IconLabel>
|
|
|
|
|
<IconLabel size='24px' gap='8px' type='bestScore'>
|
|
|
|
|
{props.bestScore ? props.bestScore : 'xxx'}
|
|
|
|
|
</IconLabel>
|
|
|
|
|
<IconLabel size='24px' gap='8px' type='deadline'>
|
|
|
|
|
{props.deadline ? props.deadline.slice(0, 10) : 'xxx'}
|
|
|
|
|
</IconLabel>
|
|
|
|
|
<IconLabel size='24px' gap='8px' type='baseline'>
|
|
|
|
|
{props.baseline ? props.baseline : 'xxx'}
|
|
|
|
|
</IconLabel>
|
|
|
|
|
{props.prize ? <IconLabel size='24px' gap='8px' type='prize'>
|
|
|
|
|
{props.prize}
|
|
|
|
|
</IconLabel> : ''}
|
|
|
|
|
</IconsGrid>
|
|
|
|
|
</FlexColumn>
|
2022-07-07 15:45:29 +02:00
|
|
|
</ChallengeStyle>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default MiniChallenge;
|
