gonito-frontend/src/components/elements/MiniChallenge.js

83 lines
2.3 KiB
JavaScript
Raw Normal View History

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";
import metricIco from '../../assets/metric_ico.svg';
import coinsIco from '../../assets/coins_ico.svg';
import baselineIco from '../../assets/baseline_ico.svg';
import clockIco from '../../assets/clock_ico.svg';
import cupIco from '../../assets/cup_ico.svg';
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;
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'>
<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>
<Svg src={props.ico} width='30px' height='30px'/>
2022-07-07 15:45:29 +02:00
</FlexRow>
<Line/>
2022-07-07 15:45:29 +02:00
<Body as='p' margin='0 0 14px 0'>
{props.describe}
</Body>
<IconsGrid>
<IconLabel size='24px' gap='8px' ico={metricIco}>
Haversine
</IconLabel>
<IconLabel size='24px' gap='8px' ico={cupIco}>
79%
</IconLabel>
<IconLabel size='24px' gap='8px' ico={clockIco}>
6 days
</IconLabel>
<IconLabel size='24px' gap='8px' ico={baselineIco}>
55%
</IconLabel>
<IconLabel size='24px' gap='8px' ico={coinsIco}>
150000 PLN
</IconLabel>
</IconsGrid>
</ChallengeStyle>
);
}
export default MiniChallenge;