feat: show time data on coding

zaida04 · Jan 23, 2024 · e41e971 · e41e971
1 parent 00664e5
commit e41e971
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/src/components/coding_time/CodingTime.astro b/src/components/coding_time/CodingTime.astro
@@ -0,0 +1,17 @@
+---
+interface Props {
+    year: string;
+    hours: number;
+    minutes: number;
+}
+
+const { year, hours, minutes } = Astro.props;
+---
+
+<p class="leading-loose">
+    {year}:{" "}
+    <span class="text-pink-600 font-bold">
+        {hours} hrs & {minutes} mins
+    </span>{" "}
+    spent coding.
+</p>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,9 +3,11 @@ import { Image } from "astro:assets";
 import MyFace from "../static/imgs/my_face.png";
 import { projects_data } from "../static/data/projects";
 import { competitions_data } from "../static/data/competitions";
+import { wakatime_data } from "../static/data/wakatime";
 
 import PageLayout from "../components/layouts/PageLayout.astro";
 import ProjectCard from "../components/project/ProjectCard";
+import CodingTime from "../components/coding_time/CodingTime.astro";
 import BlogCard from "../components/blog/BlogCard";
 import { Github, Mail } from "lucide-react";
 import CompetitionCard from "../components/competition/CompetitionCard";
@@ -100,13 +102,19 @@ const allPosts = await getCollection("posts");
                     />.
                 </p>
 
-                <h3>Coding Stats</h3>
-
-                <p class="leading-loose">
-                    I've spent <span class="text-pink-600 font-bold">
-                        394 hrs & 2 mins
-                    </span> coding last year.
-                </p>
+                <div>
+                    <h3>Coding Stats</h3>
+                    {
+                        Object.keys(wakatime_data).map((year) => (
+                            <CodingTime
+                                year={year}
+                                {...wakatime_data[
+                                    year as keyof typeof wakatime_data
+                                ]}
+                            />
+                        ))
+                    }
+                </div>
 
                 <div class="flex flex-row gap-2">
                     <Github />

diff --git a/src/static/data/wakatime.ts b/src/static/data/wakatime.ts
@@ -0,0 +1,5 @@
+export const wakatime_data = {
+	"2022": { hours: 438, minutes: 29 },
+	"2023": { hours: 482, minutes: 49 },
+	"2024": { hours: 3, minutes: 1 },
+};