git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/components/BarGraph.jsx
29 lines 746 B history raw
1import React from 'react';
2import cn from 'classnames';
3import { Nothing } from 'folktale/maybe';
5const BarGraph = ({
6 className,
7 available = Nothing(),
8 sent = Nothing(),
9 accepted = Nothing(),
10}) => {
11 const _available = available.getOrElse(1);
12 const _sent = sent.getOrElse(0);
13 const _accepted = accepted.getOrElse(0);
14 const total = _available + _sent;
15 return (
16 <div className={cn('h7 p1 b1 b-black flex', className)}>
17 <div
18 className="bg-black"
19 style={{ width: `${(_accepted / total) * 100}%` }}></div>
20 <div
21 className="bg-yellow4"
22 style={{ width: `${((_sent - _accepted) / total) * 100}%` }}></div>
24 <div className="flex-grow" />
25 </div>
26 );
27};
29export default BarGraph;