72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
const HealthHeart = ({
|
|
health,
|
|
size,
|
|
}: {
|
|
health: number | undefined
|
|
size: number
|
|
}) => {
|
|
const styles = {
|
|
height: `${size}px`,
|
|
width: `${size}px`,
|
|
}
|
|
|
|
return (
|
|
<svg
|
|
id="account-step-eleven"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={
|
|
health
|
|
? health > 15 && health < 50
|
|
? 'text-th-warning'
|
|
: health >= 50
|
|
? 'text-th-success'
|
|
: 'text-th-error'
|
|
: 'text-th-fgd-4'
|
|
}
|
|
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
|
|
? health > 15 && health < 50
|
|
? '1s'
|
|
: health >= 50
|
|
? '2s'
|
|
: '0.33s'
|
|
: '0s'
|
|
}
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="opacity"
|
|
values="0.8;1;0.8"
|
|
dur={
|
|
health
|
|
? health > 15 && health < 50
|
|
? '1s'
|
|
: health >= 50
|
|
? '2s'
|
|
: '0.33s'
|
|
: '0s'
|
|
}
|
|
repeatCount="indefinite"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export default HealthHeart
|