pulse health bar and heart when health < 10
This commit is contained in:
parent
73162e5544
commit
97e93faf78
|
@ -167,7 +167,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
|||
health={
|
||||
group && mangoAccount
|
||||
? mangoAccount.getHealthRatioUi(group, HealthType.maint)
|
||||
: undefined
|
||||
: 0
|
||||
}
|
||||
size={32}
|
||||
/>
|
||||
|
|
|
@ -32,7 +32,9 @@ const HealthBar = ({ health }: { health: number }) => {
|
|||
...sharedStyles,
|
||||
width: `${barWidths[0]}%`,
|
||||
}}
|
||||
className={`flex rounded-full`}
|
||||
className={`flex rounded-full ${
|
||||
health && health < 10 ? 'animate-pulse' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 flex h-1 rounded-full bg-th-bkg-3">
|
||||
|
|
|
@ -1,12 +1,6 @@
|
|||
import { useMemo } from 'react'
|
||||
|
||||
const HealthHeart = ({
|
||||
health,
|
||||
size,
|
||||
}: {
|
||||
health: number | undefined
|
||||
size: number
|
||||
}) => {
|
||||
const HealthHeart = ({ health, size }: { health: number; size: number }) => {
|
||||
const fillColor = useMemo(() => {
|
||||
if (!health) return 'var(--fgd-4)'
|
||||
if (health <= 25) {
|
||||
|
@ -30,6 +24,7 @@ const HealthHeart = ({
|
|||
|
||||
return (
|
||||
<svg
|
||||
className={health && health < 10 ? 'animate-pulse' : ''}
|
||||
id="account-step-eleven"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={styles}
|
||||
|
|
Loading…
Reference in New Issue