about summary refs log tree commit diff
path: root/website/goals/src/App.tsx
blob: 53195d9af98f77d89f95e06a60ffb71a39d2806d (plain) (blame)
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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;