diff options
author | William Carroll <wpcarro@gmail.com> | 2021-12-27T16·18-0400 |
---|---|---|
committer | clbot <clbot@tvl.fyi> | 2021-12-27T16·21+0000 |
commit | 3d1519c38441d405188bdacb57d85f09ba7a849d (patch) | |
tree | 05187fdb2929a313864813aca78f7fd26efbb583 /users/wpcarro/website/goals/src | |
parent | 1f8e606c123e21ae1f9d61160d1ade277fc91bf9 (diff) |
chore(wpcarro/website): Archive dusty, old websites r/3478
Change-Id: I07b6e70ec4026644733e58a2c5f2aa6696a038f3 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4719 Reviewed-by: wpcarro <wpcarro@gmail.com> Autosubmit: wpcarro <wpcarro@gmail.com> Tested-by: BuildkiteCI
Diffstat (limited to 'users/wpcarro/website/goals/src')
-rw-r--r-- | users/wpcarro/website/goals/src/App.tsx | 132 | ||||
-rw-r--r-- | users/wpcarro/website/goals/src/index.css | 3 | ||||
-rw-r--r-- | users/wpcarro/website/goals/src/index.html | 11 | ||||
-rw-r--r-- | users/wpcarro/website/goals/src/index.tsx | 5 |
4 files changed, 0 insertions, 151 deletions
diff --git a/users/wpcarro/website/goals/src/App.tsx b/users/wpcarro/website/goals/src/App.tsx deleted file mode 100644 index 53195d9af98f..000000000000 --- a/users/wpcarro/website/goals/src/App.tsx +++ /dev/null @@ -1,132 +0,0 @@ -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; diff --git a/users/wpcarro/website/goals/src/index.css b/users/wpcarro/website/goals/src/index.css deleted file mode 100644 index b5c61c956711..000000000000 --- a/users/wpcarro/website/goals/src/index.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/users/wpcarro/website/goals/src/index.html b/users/wpcarro/website/goals/src/index.html deleted file mode 100644 index 91752af916a4..000000000000 --- a/users/wpcarro/website/goals/src/index.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <link rel="stylesheet" href="./index.css" /> - </head> - <body> - <div id="mount"></div> - <script src="./index.tsx"></script> - </body> -</html> diff --git a/users/wpcarro/website/goals/src/index.tsx b/users/wpcarro/website/goals/src/index.tsx deleted file mode 100644 index 51fc2363ec71..000000000000 --- a/users/wpcarro/website/goals/src/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; - -ReactDOM.render(<App />, document.getElementById("mount")); |