File size: 1,589 Bytes
ecf4195 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React from 'react';
const Medal = ({ rank }) => {
const baseMedalStyle = {
margin: '0px',
fontWeight: '900',
fontStretch: '150%',
fontFamily: 'Inter, -apple-system, sans-serif',
width: '24px',
height: '24px',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '0.95rem',
lineHeight: '1',
padding: '0px',
position: 'relative'
}
const medalStyle1 = {
...baseMedalStyle,
color: 'rgb(181, 138, 27)',
background:
'linear-gradient(135deg, rgb(255, 247, 224) 0%, rgb(255, 215, 0) 100%)',
border: '1px solid rgba(212, 160, 23, 0.35)',
boxShadow: 'rgba(212, 160, 23, 0.8) 1px 1px 0px'
}
const medalStyle2 = {
color: 'rgb(102, 115, 128)',
background:
'linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(216, 227, 237) 100%)',
border: '1px solid rgba(124, 139, 153, 0.35)',
boxShadow: 'rgba(124, 139, 153, 0.8) 1px 1px 0px'
}
const medalStyle3 = {
color: 'rgb(184, 92, 47)',
background:
'linear-gradient(135deg, rgb(253, 240, 233) 0%, rgb(255, 188, 140) 100%)',
border: '1px solid rgba(204, 108, 61, 0.35)',
boxShadow: 'rgba(204, 108, 61, 0.8) 1px 1px 0px'
}
const medalStyle = {
...baseMedalStyle,
...(rank < 4 ? [medalStyle1, medalStyle2, medalStyle3][rank - 1] : {})
}
return (
<div
style={{
alignItems: 'center',
justifyContent: 'center',
display: 'flex'
}}
>
<div style={medalStyle}>{rank}</div>
</div>
)
}
export default Medal;
|