From 26103814ac513fe67b5a196b3fb4627a9d63ea1d Mon Sep 17 00:00:00 2001
From: metamethods <tabledmetamethods@gmail.com>
Date: Fri, 3 Jan 2025 00:06:08 -0800
Subject: [PATCH] feat: date component updates in realtime

---
 src/lib/Date.svelte | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/Date.svelte b/src/lib/Date.svelte
index fb13030..1ddeeed 100644
--- a/src/lib/Date.svelte
+++ b/src/lib/Date.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
 	const { date }: { date: Date } = $props();
-	const difference = new Date().getTime() / 1000 - date.getTime() / 1000;
-	const seconds = ~~(difference % 60);
-	const minutes = ~~(difference / 60) % 60;
-	const hours = ~~(difference / 3600) % 24;
-	const days = ~~(difference / 86400);
+
+	let currentDate = $state(Date.now());
+	let difference = $derived(currentDate / 1000 - date.getTime() / 1000);
+	let seconds = $derived(~~(difference % 60));
+	let minutes = $derived(~~(difference / 60) % 60);
+	let hours = $derived(~~(difference / 3600) % 24);
+	let days = $derived(~~(difference / 86400));
+
+	setInterval(() => {
+		currentDate = Date.now();
+	});
 </script>
 
-<p class="group underline">
+<span class="group underline">
 	<span class="group-hover:hidden">
 		about
 		{#if minutes == 0}
@@ -24,4 +30,4 @@
 	<span class="hidden group-hover:block">
 		{date.toLocaleString()}
 	</span>
-</p>
+</span>