1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import React from "react";
function ProgressBar(props: {
done: number,
total: number,
units: string,
color: string,
}) {
const { done, total, units, color } = props
const width = Math.floor(done / total * 100)
const rest = 100 - width
let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`]
if (color === 'white') {
[fg, bg] = ['bg-gray-600', 'bg-gray-100']
}
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: {
subject: string,
goal: string,
done: number,
total: number,
units: string,
color: string,
}) {
const { subject, goal, done, total, units, color } = props
const width = "6em"
const Tr = (props: {
label: string,
value: string,
valueComponent?: React.ReactElement,
}) => (
<tr className="flex py-2">
<td className="text-gray-600" 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: {
children: React.ReactNode
}) {
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>
)
}
export default App;
|
