45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
import { Motion } from '@legendapp/motion'
|
|
|
|
import { Fonts, Palette, Style } from '../styles'
|
|
|
|
const Badge = ({ count = 0, size = 20, customContent = null, backgroundColor = null } = {}) => {
|
|
if (!count && !customContent) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Motion.View
|
|
animate={{ scale: 1 }}
|
|
initial={{ scale: 0 }}
|
|
transition={{ type: 'tween', duration: 0.5 }}
|
|
style={{
|
|
position: 'absolute',
|
|
top: -size / 4,
|
|
right: -size / 4,
|
|
backgroundColor: backgroundColor || Palette.red,
|
|
borderRadius: 500,
|
|
...Style.containerCenter,
|
|
width: size,
|
|
height: size,
|
|
}}
|
|
>
|
|
{customContent ? (
|
|
customContent()
|
|
) : (
|
|
<Motion.Text
|
|
animate={{ scale: 1 }}
|
|
initial={{ scale: 0 }}
|
|
transition={{ type: 'tween', duration: 0.5 }}
|
|
style={{
|
|
...Fonts({ color: Palette.white }),
|
|
}}
|
|
>
|
|
{count}
|
|
</Motion.Text>
|
|
)}
|
|
</Motion.View>
|
|
)
|
|
}
|
|
|
|
export default Badge
|