5 files changed, 109 insertions, 0 deletions
diff --git a/website/habitgarden/src/App.tsx b/website/habitgarden/src/App.tsx
new file mode 100644
index 000000000000..7086c20b8e86
--- /dev/null
+++ b/website/habitgarden/src/App.tsx
@@ -0,0 +1,57 @@
+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";
+
+const CircleRow = (props: { count: number }) => (
+  <tr>
+    {Array.from(Array(props.count)).map((_, i) => (
+      <td key={i} className="text-center px-3 py-2">
+        <input type="radio" />
+      </td>
+    ))}
+  </tr>
+);
+
+const CircleGrid = (props: { label: string; columns: string[] }) => (
+  <div>
+    <h1 className="text-center text-2xl py-4">{props.label}</h1>
+    <table className="mx-auto">
+      <thead>
+        <tr>
+          {props.columns.map((x) => (
+            <th key={x}>{x}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {Array.from(Array(props.columns.length)).map((_, i) => (
+          <CircleRow key={i} count={props.columns.length} />
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+const App: React.FC = () => {
+  const dispatch = useDispatch();
+  const { isLoading } = useTypedSelector((state) => ({
+    isLoading: state.isLoading,
+  }));
+
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <CircleGrid label="Meditation" columns={["M", "T", "W", "Th", "F"]} />
+          <CircleGrid label="Reading" columns={["M", "T", "W", "Th", "F"]} />
+          <CircleGrid label="Challenge" columns={["M", "T", "W", "Th", "F"]} />
+          <CircleGrid label="Jiu Jitsu" columns={["S", "M", "T"]} />
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;
diff --git a/website/habitgarden/src/index.css b/website/habitgarden/src/index.css
new file mode 100644
index 000000000000..b5c61c956711
--- /dev/null
+++ b/website/habitgarden/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/website/habitgarden/src/index.html b/website/habitgarden/src/index.html
new file mode 100644
index 000000000000..91752af916a4
--- /dev/null
+++ b/website/habitgarden/src/index.html
@@ -0,0 +1,11 @@
+<!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/website/habitgarden/src/index.tsx b/website/habitgarden/src/index.tsx
new file mode 100644
index 000000000000..dc28dc4a9cc8
--- /dev/null
+++ b/website/habitgarden/src/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { Provider } from "react-redux";
+import store from "./store";
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("mount")
+);
diff --git a/website/habitgarden/src/store.ts b/website/habitgarden/src/store.ts
new file mode 100644
index 000000000000..03e980a491cc
--- /dev/null
+++ b/website/habitgarden/src/store.ts
@@ -0,0 +1,26 @@
+import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
+import { useSelector, TypedUseSelectorHook } from "react-redux";
+
+export interface State {
+  isLoading: boolean;
+}
+
+const initialState: State = {
+  isLoading: true,
+};
+
+export const { actions, reducer } = createSlice({
+  name: "application",
+  initialState,
+  reducers: {
+    toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
+  }
+});
+
+/**
+ * Defining and consuming this allows us to avoid annotating State in all of our
+ * selectors.
+ */
+export const useTypedSelector: TypedUseSelectorHook<State> = useSelector;
+
+export default configureStore({ reducer });