mars-v2-frontend/components/ProgressBar.tsx

import React, { useEffect, useState } from 'react'
import { ArrowRightIcon } from '@heroicons/react/24/solid'

type Props = {
  value: number
}

const ProgressBar = ({ value }: Props) => {
  const percentageValue = `${(value * 100).toFixed(0)}%`
  const [newValue, setNewValue] = useState(0.77)

  useEffect(() => {
    setInterval(() => {
      // randomizing value between value and 1
      setNewValue(Math.random() * (1 - value) + value)
    }, 3000)
  }, [value])

  const percentageNewValue = `${(newValue * 100).toFixed(0)}%`

  return (
    <div className="relative w-[130px] h-4 bg-black rounded-full z-0">
      <div
        className="absolute bg-green-500 h-4 rounded-full z-10"
        style={{ width: percentageValue }}
      />
      <div
        className="absolute bg-red-500 h-4 rounded-full transition-[width] duration-500"
        style={{ width: percentageNewValue }}
      />
      <div className="absolute w-full text-xs font-medium text-white flex justify-center items-center gap-x-2 z-20">
        {percentageValue}
        <ArrowRightIcon className="h-3 w-3" />
        {percentageNewValue}
      </div>
    </div>
  )
}

export default ProgressBar