function Progress()

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>
  )
}