Split out card components

src/app/OverviewPage.tsx

@@ -1,6 +1,7 @@
-import {SubjectComparisonCard, SubjectOverviewCard} from "@/app/a.client";
+import {SubjectComparisonCard} from "@/app/cards/subjectComparisonCard";
-import {CalendarOverviewCard} from "@/app/calendarOverviewCard";
+import {CalendarOverviewCard} from "@/app/cards/calendarOverviewCard";
 import {OverviewConfig} from "@/app/overviewConfig";
+import {SubjectOverviewCard} from "@/app/cards/subjectOverviewCard";
 
 export default function OverviewPage({config}: {
     config: OverviewConfig

src/app/cards/calendarOverviewCard.tsx

@@ -7,7 +7,7 @@ import * as R from 'ramda';
 import * as dFns from 'date-fns';
 import CalendarHeatmap from 'react-calendar-heatmap';
 import 'react-calendar-heatmap/dist/styles.css';
-import './calendar-styles.css'
+import '../calendar-styles.css'
 import {Tooltip} from 'react-tooltip';
 
 const dailyGoal = 4;

src/app/cards/subjectComparisonCard.tsx

@@ -3,64 +3,9 @@
 import useSWR from "swr";
 import {fetcher} from "@/app/utils";
 import {useEffect, useState} from "react";
-import {Card, DonutChart, Metric, Text, Title} from "@tremor/react";
+import {Card, DonutChart, Title} from "@tremor/react";
 import * as R from "ramda";
 
-export function SubjectOverviewCard({
-                                        projectId,
-                                        title,
-                                        startTime = '2023-12-15T00:00:00.000Z',
-                                        endTime = '2024-01-25T00:00:00.000Z',
-                                    }: {
-    projectId: number,
-    title?: string
-    startTime?: string,
-    endTime?: string,
-}) {
-    const {
-        data: _project
-    } = useSWR<{
-        raw_json: {
-            name: string,
-            color: string,
-        }
-    }[]>(`/api/project?select=raw_json&toggl_id=eq.${projectId}`, fetcher);
-
-    const [project, setProject] = useState({
-        name: '',
-        color: '',
-    });
-
-    useEffect(() => {
-        if (_project) {
-            setProject(_project[0].raw_json);
-        }
-    }, [_project]);
-
-    const {
-        data,
-        error,
-        isLoading,
-    } = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.${startTime}&start=lt.${endTime}`, fetcher);
-    const [a, setA] = useState(0)
-
-    useEffect(() => {
-        if (data) {
-            setA(data
-                .map((entry) => entry.raw_json.seconds)
-                .reduce((a, b) => a + b, 0));
-        }
-    }, [data]);
-
-    return (
-        <Card style={{borderColor: project?.color}} decoration={'left'}>
-            <Title>{title ?? project?.name}</Title>
-            <Text>Total</Text>
-            <Metric>{(a / (60 * 60)).toFixed(2)} hours</Metric>
-        </Card>
-    )
-}
-
 export function SubjectComparisonCard({
                                           projectIds,
                                           startTime,

src/app/cards/subjectOverviewCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import useSWR from "swr";
+import {fetcher} from "@/app/utils";
+import {useEffect, useState} from "react";
+import {Card, Metric, Text, Title} from "@tremor/react";
+
+export function SubjectOverviewCard({
+                                        projectId,
+                                        title,
+                                        startTime = '2023-12-15T00:00:00.000Z',
+                                        endTime = '2024-01-25T00:00:00.000Z',
+                                    }: {
+    projectId: number,
+    title?: string
+    startTime?: string,
+    endTime?: string,
+}) {
+    const {
+        data: _project
+    } = useSWR<{
+        raw_json: {
+            name: string,
+            color: string,
+        }
+    }[]>(`/api/project?select=raw_json&toggl_id=eq.${projectId}`, fetcher);
+
+    const [project, setProject] = useState({
+        name: '',
+        color: '',
+    });
+
+    useEffect(() => {
+        if (_project) {
+            setProject(_project[0].raw_json);
+        }
+    }, [_project]);
+
+    const {
+        data,
+        error,
+        isLoading,
+    } = useSWR<any[]>(`/api/time_entry?select=raw_json&project_id=eq.${projectId}&start=gt.${startTime}&start=lt.${endTime}`, fetcher);
+    const [a, setA] = useState(0)
+
+    useEffect(() => {
+        if (data) {
+            setA(data
+                .map((entry) => entry.raw_json.seconds)
+                .reduce((a, b) => a + b, 0));
+        }
+    }, [data]);
+
+    return (
+        <Card style={{borderColor: project?.color}} decoration={'left'}>
+            <Title>{title ?? project?.name}</Title>
+            <Text>Total</Text>
+            <Metric>{(a / (60 * 60)).toFixed(2)} hours</Metric>
+        </Card>
+    )
+}