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.
47 lines
1.2 KiB
47 lines
1.2 KiB
import { Stack } from '../../types' |
|
import './style.scss' |
|
import _ from 'lodash' |
|
import { useState } from 'react' |
|
import { Modal } from '../../layout/Modal' |
|
import { TransactionForm } from '../../forms/TransactionForm' |
|
|
|
type Props = { |
|
stack: Stack |
|
} |
|
|
|
export const FundBar = ({ stack }: Props) => { |
|
const amount = _.sumBy(stack.transactions, (tx) => parseFloat(tx.amount)) |
|
const max = parseFloat(stack.amount) |
|
const current = max - amount |
|
const u = Math.max(current / max, 0) |
|
|
|
const [newTx, setNewTx] = useState(false) |
|
|
|
const addTransaction = () => { |
|
console.log(`adding transaction to => ${stack.name}`) |
|
setNewTx(true) |
|
} |
|
|
|
return ( |
|
<> |
|
<div className="fundbar"> |
|
<div className="back" onClick={addTransaction}> |
|
<h3>{stack.name}</h3> |
|
</div> |
|
<div |
|
className="front" |
|
style={{ |
|
background: `hsl(${u * 120}, 100%, 50%)`, |
|
height: `${u * 100}%`, |
|
}} |
|
></div> |
|
<div className="totals"> |
|
${Math.floor(current)} / ${max} |
|
</div> |
|
</div> |
|
<Modal visible={newTx} onCancel={() => setNewTx(false)}> |
|
<TransactionForm stackId={stack.id} /> |
|
</Modal> |
|
</> |
|
) |
|
}
|
|
|