made time display client-side

src/components/BlogList.svelte

@@ -3,6 +3,7 @@
   import { onMount } from "svelte";
   import { SvelteMap } from "svelte/reactivity";
   import { parseTime, printTime } from "../utils/time";
+  import Time from "./Time.svelte";
 
   interface Props {
     posts: CollectionEntry<"blog">[];
@@ -69,11 +70,9 @@
             <address class="inline-block post-meta col-start-2 md:ml-3">
               {post.data.author}
             </address>
-            <time class="inline-block post-meta col-start-3 lg:ml-1"
-              datetime={parseTime(post.data.pubDate).toString()}
-            >
-              {printTime(parseTime(post.data.pubDate))}
-            </time>
+            <div class="inline-block post-meta col-start-3 lg:ml-1">
+              <Time time={parseTime(post.data.pubDate)} />
+            </div>
             <div class="col-span-3">{post.data.summary}</div>
           </div>
         </a>

src/components/Time.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+import type { Temporal } from "@js-temporal/polyfill";
+import { printTime } from "../utils/time";
+
+interface Props {
+  time: Temporal.ZonedDateTime
+}
+
+const { time }: Props = $props();
+</script>
+
+<time datetime={time.toString()} class="post-meta inline-block col-start-3">
+  {printTime(time)}
+</time>