60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { Box, Flex } from 'theme-ui'
|
|
import { assetsBucketBaseUrl } from '../../lib/consts'
|
|
import { repeat } from '../../lib/utils'
|
|
|
|
interface StigmaIconProps {
|
|
icon: string
|
|
rarity?: number
|
|
}
|
|
|
|
const starSize = 16
|
|
|
|
const StigmaIcon = ({ icon: fileName, rarity }: StigmaIconProps) => {
|
|
return (
|
|
<Box sx={{ width: 112 }}>
|
|
<Box
|
|
sx={{
|
|
borderRadius: 4,
|
|
width: (128 / 8) * 7,
|
|
height: (112 / 8) * 7,
|
|
background: ` no-repeat 100% 100% /100% url(${assetsBucketBaseUrl}/raw/stigmataicons/${fileName}.png), ${getBackgroundByRarity(
|
|
rarity
|
|
)}`
|
|
}}
|
|
/>
|
|
{rarity != null && (
|
|
<Flex sx={{ marginTop: -starSize / 2, justifyContent: 'center', width: '100%' }}>
|
|
{repeat(rarity, index => (
|
|
<Box
|
|
key={index}
|
|
sx={{
|
|
width: starSize,
|
|
height: starSize,
|
|
background: `no-repeat 50% / 100% url(${assetsBucketBaseUrl}/raw-misc/StarBig.png)`
|
|
}}
|
|
/>
|
|
))}
|
|
</Flex>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default StigmaIcon
|
|
|
|
function getBackgroundByRarity(rarity?: number) {
|
|
switch (rarity) {
|
|
case 6:
|
|
return 'linear-gradient(180deg, #e18434, #fbd977)'
|
|
case 5:
|
|
return 'linear-gradient(transparent, #c86de0),#7630a3'
|
|
case 4:
|
|
case 3:
|
|
return 'linear-gradient(transparent, #0ec1eb), #2368b1'
|
|
case 2:
|
|
return `linear-gradient(transparent, #52c389),#31756c`
|
|
default:
|
|
return 'transparent'
|
|
}
|
|
}
|