97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
function ProgressBar(props) {
|
|
const { done, total, units, color } = props
|
|
const width = Math.floor(done / total * 100)
|
|
const rest = 100 - width
|
|
|
|
let [fg, bg] = [`bg-${color}`, `bg-${color}-lightest`]
|
|
|
|
if (color === 'white') {
|
|
[fg, bg] = ['bg-grey', 'bg-grey-lightest']
|
|
}
|
|
|
|
return (
|
|
<div className={`relative ${bg} h-5`}>
|
|
<div className={`${fg} h-5 absolute top-0 left-0`} style={{width: `${width}%`}}></div>
|
|
<p className="absolute text-xs pl-1 pt-1">{done} of {total} {units}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Goal(props) {
|
|
const { subject, goal, done, total, units, color } = props
|
|
const width = "6em"
|
|
|
|
const Tr = (props) => (
|
|
<tr className="flex py-2">
|
|
<td className="text-grey-dark" style={{width: width}}>{props.label}</td>
|
|
<td className="flex-1">
|
|
{props.valueComponent ? props.valueComponent : props.value}
|
|
</td>
|
|
</tr>
|
|
)
|
|
|
|
return (
|
|
<table className="w-full mb-10">
|
|
<tbody>
|
|
<Tr label="Subject" value={subject} />
|
|
<Tr label="Goal" value={goal} />
|
|
<Tr label="Progress" value={goal} valueComponent={
|
|
<ProgressBar done={done} total={total} units={units} color={color} />
|
|
}/>
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
|
|
function Copy(props) {
|
|
return (
|
|
<p className="pb-4 leading-loose">
|
|
{props.children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<div className="container mx-auto font-mono">
|
|
<section>
|
|
<h1 className="text-center pt-12 pb-6">Goals</h1>
|
|
<Copy>
|
|
For me, a goal is something that is difficult for me to complete but
|
|
easy for me to measure. I tend to add new goals as time progresses,
|
|
mistakenly assuming that I can support additional goals for free. To
|
|
counterbalance my tendancy to casually accumulate goals, I aim to only
|
|
have three goals; I will not add a new goal until I complete an
|
|
existing goal. I created and published this page to clarify that idea.
|
|
</Copy>
|
|
<Copy>
|
|
Here are my current goals and the progress I have made towards
|
|
achieving them.
|
|
</Copy>
|
|
</section>
|
|
<section className="pt-4">
|
|
<Goal subject="Meditation"
|
|
goal="Meditate for 10,000 hours"
|
|
done={100}
|
|
total={10000}
|
|
units="hrs"
|
|
color="purple" />
|
|
<Goal subject="Debt"
|
|
goal="Pay my student debt balance"
|
|
done={30000}
|
|
total={70000}
|
|
units="USD"
|
|
color="green" />
|
|
<Goal subject="Brazilian Jiu Jitsu"
|
|
goal="Train until an instructor gives me a black belt"
|
|
done={1}
|
|
total={5}
|
|
units="belts"
|
|
color="white" />
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
ReactDOM.render(<App />, document.getElementById('root'))
|
|
|