diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index bc509fb6..5dea456f 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -36,6 +36,7 @@ function go() {
router.push(getStatusPath(status))
}
+const createdAt = useFormattedDateTime(status.createdAt)
const timeago = useTimeAgo(() => status.createdAt, {
showSecond: true,
messages: {
@@ -89,9 +90,11 @@ const timeago = useTimeAgo(() => status.createdAt, {
-
- {{ timeago }}
-
+
+
+ {{ timeago }}
+
+
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index ad200c68..dc548e67 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -11,8 +11,7 @@ const status = $computed(() => {
return props.status
})
-const formatter = Intl.DateTimeFormat(undefined, { dateStyle: 'long' })
-const date = computed(() => formatter.format(new Date(status.createdAt)))
+const date = useFormattedDateTime(status.createdAt)
diff --git a/composables/time.ts b/composables/time.ts
index e69de29b..710b7928 100644
--- a/composables/time.ts
+++ b/composables/time.ts
@@ -0,0 +1,9 @@
+import type { MaybeRef } from '@vueuse/core'
+
+export const useFormattedDateTime = (
+ value: MaybeRef,
+ options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
+) => {
+ const formatter = Intl.DateTimeFormat(undefined, options)
+ return computed(() => formatter.format(new Date(resolveUnref(value))))
+}