1 files changed, 62 insertions, 0 deletions
diff --git a/website/days-of-week-habits/src/App.tsx b/website/days-of-week-habits/src/App.tsx
new file mode 100644
index 000000000000..61bfdfa8cd72
--- /dev/null
+++ b/website/days-of-week-habits/src/App.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { actions, useTypedSelector } from "./store";
+import { Link } from "react-router-dom";
+import humanizeDuration from "humanize-duration";
+import type { Task, Habit } from "./store";
+
+const days = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+];
+
+const postItColor = "yellow";
+
+const PostIt = (props: { day: number; tasks: Task[] }) => (
+  <div className={`bg-${postItColor}-300 mr-2 mb-2 w-1/5 px-4 pb-4`}>
+    <h2 className="text-center py-4">{days[props.day]}</h2>
+    {props.tasks.map((task) => (
+      <ol key={task.label}>
+        <li className="py-2">
+          <span className={`text-${postItColor}-600 pr-2`}>
+            [{humanizeDuration(task.duration)}]
+          </span>
+          {task.label}
+        </li>
+      </ol>
+    ))}
+  </div>
+);
+
+const App: React.FC = () => {
+  const dispatch = useDispatch();
+  const { isLoading, habits } = useTypedSelector((state) => ({
+    isLoading: state.isLoading,
+    habits: state.habits,
+  }));
+
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <div className="mx-auto font-mono">
+            <h1 className="text-center my-8">Habits</h1>
+            <ol className="flex">
+              {habits.map((habit) => (
+                <PostIt key={habit.day} day={habit.day} tasks={habit.tasks} />
+              ))}
+            </ol>
+          </div>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;