Philip Cesar Garay
50 lines
1.0 KiB
JavaScript
50 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;
|