75 lines
1.3 KiB
JavaScript
75 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import { gql, graphql } from 'react-apollo';
|
|
import { Div } from 'glamorous';
|
|
|
|
const blue = "#00BCD4";
|
|
const size = 2.6;
|
|
const size_rem = `${size}rem`;
|
|
const pad = "0.5rem";
|
|
|
|
export default({
|
|
id,
|
|
number,
|
|
completed,
|
|
letter,
|
|
description,
|
|
additionalText,
|
|
scoutID,
|
|
mutate
|
|
}) => {
|
|
if(completed) {
|
|
return <Div
|
|
fontSize={`${size/2}rem`}
|
|
border={`0.2rem solid ${blue}`}
|
|
display="inline-flex"
|
|
color="white"
|
|
background-color={blue}
|
|
width={size_rem}
|
|
height={size_rem}
|
|
border-radius={size_rem}
|
|
margin={pad}
|
|
cursor="pointer"
|
|
>
|
|
<Div
|
|
display="flex"
|
|
width={size_rem}
|
|
height={size_rem}
|
|
justify-content="center"
|
|
align-items="center"
|
|
>
|
|
<Div display="inline-flex">{number}{letter}</Div>
|
|
</Div>
|
|
</Div>
|
|
} else {
|
|
|
|
const variables = {
|
|
scoutID,
|
|
id,
|
|
date: (new Date(Date.now())).toISOString()
|
|
};
|
|
|
|
return <Div
|
|
onClick={()=>{mutate({variables})}}
|
|
fontSize={`${size/2}rem`}
|
|
border={`0.15rem solid ${blue}`}
|
|
display="inline-flex"
|
|
color={blue}
|
|
width={size_rem}
|
|
height={size_rem}
|
|
border-radius={size_rem}
|
|
margin={pad}
|
|
cursor="pointer"
|
|
>
|
|
<Div
|
|
display="flex"
|
|
width={size_rem}
|
|
height={size_rem}
|
|
justify-content="center"
|
|
align-items="center"
|
|
>
|
|
<Div display="inline-flex">{number}{letter}</Div>
|
|
</Div>
|
|
</Div>
|
|
}
|
|
};
|