From c04b781fab013cd8a10ecfbe4f334debf2befe21 Mon Sep 17 00:00:00 2001
From: Joshua Coles <josh@coles.to>
Date: Mon, 18 Dec 2023 14:04:22 +0000
Subject: [PATCH] A little cleanup

---
 src/app/a.client.tsx | 12 ++++++++----
 src/app/page.tsx     | 21 +++++++++++++++------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/app/a.client.tsx b/src/app/a.client.tsx
index a414098..aa4a3b2 100644
--- a/src/app/a.client.tsx
+++ b/src/app/a.client.tsx
@@ -5,8 +5,12 @@ import {fetcher} from "@/app/utils";
 import {useEffect, useState} from "react";
 import {Card, Metric, Text, Title} from "@tremor/react";
 
-export function ClientComponent({projectId}: {
-    projectId: number
+export function ClientComponent({
+                                    projectId,
+                                    title
+                                }: {
+    projectId: number,
+    title?: string
 }) {
     const {
         data,
@@ -18,14 +22,14 @@ export function ClientComponent({projectId}: {
     useEffect(() => {
         if (data) {
             setA(data
-                .map((entry) => entry['raw_json']['seconds'])
+                .map((entry) => entry.raw_json.seconds)
                 .reduce((a, b) => a + b, 0));
         }
     }, [data]);
 
     return (
         <Card>
-            <Title>{data?.[0]['project']['name']}</Title>
+            <Title>{title ?? (isLoading ? 'Loading' : data?.[0]['project']['name'])}</Title>
             <Text>Total</Text>
             <Metric>{(a / (60 * 60)).toFixed(2)} hours</Metric>
         </Card>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f0c3623..4540f2c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,25 @@
-import {Card, Metric, Text, Title} from "@tremor/react";
 import {ClientComponent} from "@/app/a.client";
 
 export default function Home() {
     return (
-        <main className="flex gap-5 m-6">
-            <ClientComponent projectId={195482340}/>
+        <main className="grid gap-5 m-6 grid-cols-4">
+            <ClientComponent
+                projectId={195482340}
+            />
 
-            <ClientComponent projectId={195519024}/>
+            <ClientComponent
+                title='Measure Theory'
+                projectId={195519024}
+            />
 
-            <ClientComponent projectId={195518593}/>
+            <ClientComponent
+                title='Quantum Mechanics'
+                projectId={195518593}
+            />
 
-            <ClientComponent projectId={195754611}/>
+            <ClientComponent
+                projectId={195754611}
+            />
         </main>
     )
 }