47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
const HealthHeart = ({ health, size }: { health: number; size: number }) => {
|
|
const styles = {
|
|
height: `${size}px`,
|
|
width: `${size}px`,
|
|
}
|
|
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={
|
|
health > 15 && health < 50
|
|
? 'text-th-orange'
|
|
: health > 50
|
|
? 'text-th-green'
|
|
: 'text-th-red'
|
|
}
|
|
style={styles}
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<g transform-origin="center">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
|
|
clipRule="evenodd"
|
|
/>
|
|
<animateTransform
|
|
attributeName="transform"
|
|
type="scale"
|
|
keyTimes="0;0.5;1"
|
|
values="1;1.1;1"
|
|
dur={health > 15 && health < 50 ? '1s' : health > 50 ? '2s' : '0.33s'}
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="opacity"
|
|
values="0.8;1;0.8"
|
|
dur={health > 15 && health < 50 ? '1s' : health > 50 ? '2s' : '0.33s'}
|
|
repeatCount="indefinite"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export default HealthHeart
|