27cdd1c954
* tidy: added eslintrc and prettierrc rules * tidy: formated the files via ‚yarn format‘ * import sort improvements * format script regex fix * replace eslint import severity to warning * remove staged file Co-authored-by: Gustavo Mauricio <gustavo.mauricio58@gmail.com>
31 lines
739 B
TypeScript
31 lines
739 B
TypeScript
import React from 'react'
|
|
|
|
type Props = {
|
|
value: number
|
|
}
|
|
|
|
const ProgressBar = ({ value }: Props) => {
|
|
const percentageValue = `${(value * 100).toFixed(0)}%`
|
|
|
|
let bgColorClass = 'bg-green-500'
|
|
if (value < 1 / 3) {
|
|
bgColorClass = 'bg-red-500'
|
|
} else if (value < 2 / 3) {
|
|
bgColorClass = 'bg-yellow-500'
|
|
}
|
|
|
|
return (
|
|
<div className='relative z-0 h-4 w-[130px] rounded-full bg-black'>
|
|
<div
|
|
className={`absolute z-10 h-4 rounded-full ${bgColorClass}`}
|
|
style={{ width: percentageValue }}
|
|
/>
|
|
<div className='absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white'>
|
|
{percentageValue}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProgressBar
|