add hardcoded HTML for styling cat life events

A first step on #1 - add cat life event tracker for visualizing reducers. This adds just the hardcoded HTML for a cat life event tracker. It's not fully wired up, and not fully data driven. This allows us to do some styling but also use a little less imagination to see the cat life event tracker coming together.
alchemycodelab · Nov 28, 2022 · f2ec12e · f2ec12e
1 parent 276ea47
commit f2ec12e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/cat-life-event.jsx b/src/cat-life-event.jsx
diff --git a/src/cat-life-event.tsx b/src/cat-life-event.tsx
@@ -6,9 +6,40 @@ export type Props = {
 
 export default (): FC<Props> => {
   const component = (props: Props): ReactElement => {
-    return <>
-      {props.children}
-    </>
+    return <div>
+      <h2>Cat life events</h2>
+      <table>
+        <thead>
+          <tr>
+            <td>date</td>
+            <td>event</td>
+            <td>cat</td>
+            <td>lives left</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>2022.11.27</td>
+            <td>lost a life</td>
+            <td>Acylsm</td>
+            <td>8</td>
+          </tr>
+          <tr>
+            <td>2022.11.26</td>
+            <td>went to the petting queue</td>
+            <td>Agory</td>
+            <td>8</td>
+          </tr>
+          <tr>
+            <td>2022.11.25</td>
+            <td>made friends with a dog</td>
+            <td>Spaw</td>
+            <td>7</td>
+          </tr>
+        </tbody>
+      </table>
+
+    </div>
   }
   component.displayName = 'CatLifeEvent'
   return component