41 lines
912 B
TypeScript
41 lines
912 B
TypeScript
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>
|
|
</>
|
|
)
|
|
}
|