You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
912 B
40 lines
912 B
import { Stack } from '../../types' |
|
import './style.scss' |
|
|
|
type Props = { |
|
col: number |
|
stack: Stack |
|
} |
|
|
|
export const FundBar = ({ stack, col }: Props) => { |
|
const amount = 0 |
|
|
|
const max = stack.amount |
|
const current = max - amount |
|
const percent = Math.max(current / max, 0) |
|
const hue = percent * 120 |
|
|
|
return ( |
|
<> |
|
<div |
|
className={`fundbar back col${col}`} |
|
onClick={() => console.log(`adding transaction to => ${stack.name}`)} |
|
></div> |
|
<div |
|
className={`fundbar front col${col}`} |
|
style={{ |
|
background: `hsl(${hue}, 100%, 50%)`, |
|
height: `${percent * 40 + 10}vmin`, |
|
}} |
|
> |
|
<h3>{stack.name}</h3> |
|
</div> |
|
<div |
|
className={`fundbar totals col${col}`} |
|
style={{ color: `hsl(0, 0%, ${Math.abs(1 - percent) * 100}%)` }} |
|
> |
|
${Math.floor(current)} / ${max} |
|
</div> |
|
</> |
|
) |
|
}
|
|
|