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}: {
-    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>