in src/LangCard.js [66:97]
function Progress({ coreCompletion, otherCompletion }) {
const style = css({
display: 'flex',
width: '100%',
justifyContent: 'space-around',
marginTop: 'auto',
marginBottom: 'auto',
})
const { emoji, text } = getMilestone(coreCompletion, otherCompletion)
return (
<div {...style}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<p style={{ fontSize: '2.5rem' }}>{emoji}</p>
<p style={{ fontSize: '1rem', color: 'dimgrey' }}>{text}</p>
</div>
<div style={{ width: '8rem', fontSize: '1rem' }}>
<p>
Core: <Percentage size="lg" value={coreCompletion} />
</p>
<p>
Other: <Percentage size="md" value={otherCompletion} />
</p>
</div>
</div>
)
}