consolidation

src/components/blog/CardLinks.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Show } from "solid-js";
 import { A } from "@solidjs/router";
-import LoadingSpinner from "~/components/LoadingSpinner";
+import { Spinner } from "~/components/Spinner";
 
 export interface CardLinksProps {
   postTitle: string;
@@ -22,7 +22,7 @@ export default function CardLinks(props: CardLinksProps) {
         } mx-auto mb-1 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
       >
         <Show when={readLoading()} fallback="Read">
-          <LoadingSpinner height={24} width={24} />
+          <Spinner size={24} />
         </Show>
       </A>
       <Show when={props.privilegeLevel === "admin"}>
@@ -34,7 +34,7 @@ export default function CardLinks(props: CardLinksProps) {
           } mx-auto flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
         >
           <Show when={editLoading()} fallback="Edit">
-            <LoadingSpinner height={24} width={24} />
+            <Spinner size={24} />
           </Show>
         </A>
       </Show>

src/components/blog/TextEditor.tsx

@@ -9,6 +9,7 @@ import {
 } from "solid-js";
 import { useSearchParams, useNavigate } from "@solidjs/router";
 import { api } from "~/lib/api";
+import { formatRelativeTime } from "~/lib/date-utils";
 import { createTiptapEditor } from "solid-tiptap";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
@@ -1153,21 +1154,6 @@ export default function TextEditor(props: TextEditorProps) {
     return new Date(isoString);
   };
 
-  const formatRelativeTime = (date: Date): string => {
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffSec = Math.floor(diffMs / 1000);
-    const diffMin = Math.floor(diffSec / 60);
-    const diffHour = Math.floor(diffMin / 60);
-    const diffDay = Math.floor(diffHour / 24);
-
-    if (diffSec < 60) return `${diffSec} seconds ago`;
-    if (diffMin < 60) return `${diffMin} minute${diffMin === 1 ? "" : "s"} ago`;
-    if (diffHour < 24)
-      return `${diffHour} hour${diffHour === 1 ? "" : "s"} ago`;
-    return `${diffDay} day${diffDay === 1 ? "" : "s"} ago`;
-  };
-
   const restoreHistory = (index: number) => {
     const instance = editor();
     if (!instance) return;
@@ -4237,7 +4223,10 @@ export default function TextEditor(props: TextEditorProps) {
                             {isCurrent ? `>${index() + 1}<` : index() + 1}
                           </span>
                           <span class="text-text text-sm">
-                            {formatRelativeTime(node.timestamp)}
+                            {formatRelativeTime(node.timestamp, {
+                              style: "long",
+                              includeSeconds: true
+                            })}
                           </span>
                         </div>
                         <Show when={isCurrent}>