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, { <div flex> <StatusAccountDetails :account="status.account" /> <div flex-auto /> - <div text-sm op50 :title="status.createdAt"> - {{ timeago }} - </div> + <CommonTooltip :content="createdAt"> + <div text-sm op50 :title="status.createdAt"> + {{ timeago }} + </div> + </CommonTooltip> </div> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 /> <div> 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) </script> <template> 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<string | Date>, + options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' }, +) => { + const formatter = Intl.DateTimeFormat(undefined, options) + return computed(() => formatter.format(new Date(resolveUnref(value)))) +}