A little cleanup

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}: {
+export function ClientComponent({
-    projectId: number
+                                    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>

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">
+        <main className="grid gap-5 m-6 grid-cols-4">
-            <ClientComponent projectId={195482340}/>
+            <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>
     )
 }