29 lines
1.0 KiB
JavaScript
29 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
import { monthlyExpensesComplete } from '../../../initial_state';
|
|
|
|
export default class ProgressPanel extends React.PureComponent {
|
|
render() {
|
|
if (!monthlyExpensesComplete) return null;
|
|
|
|
const completed = Math.min(monthlyExpensesComplete, 100);
|
|
const style = {
|
|
width: `${completed}%`,
|
|
};
|
|
|
|
return (
|
|
<div className='wtf-panel progress-panel'>
|
|
<div className='wtf-panel-header progress-panel-header'>
|
|
<div className='wtf-panel-header__label'>Gab's Operational Expenses</div>
|
|
</div>
|
|
<div className='wtf-panel__content progress-panel__content'>
|
|
<span className='progress-panel__text'>We are 100% funded by you.</span>
|
|
<div className='progress-panel__bar-container'>
|
|
<a className='progress-panel__bar' style={style} href='https://shop.dissenter.com/category/donations'>
|
|
<span className='progress-panel__bar__text'>{completed}% covered this month</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
} |