feat(frontend): introduce TimeDisplay component

This commit is contained in:
kolaente 2026-04-20 18:59:24 +02:00 committed by kolaente
parent 7e4bf83fa0
commit c7b088ac18
1 changed files with 29 additions and 0 deletions

View File

@ -0,0 +1,29 @@
<template>
<time
v-if="date"
v-tooltip="formatDateLong(date)"
:datetime="formatISO(date)"
>{{ displayText }}</time>
<span v-else-if="fallback">{{ fallback }}</span>
</template>
<script setup lang="ts">
import {computed} from 'vue'
import {formatDisplayDate, formatDateSince, formatDateLong, formatISO} from '@/helpers/time/formatDate'
const props = withDefaults(defineProps<{
date: Date | string | null | undefined,
mode?: 'short' | 'relative',
fallback?: string,
}>(), {
mode: 'short',
fallback: undefined,
})
const displayText = computed(() => {
if (!props.date) return ''
return props.mode === 'relative'
? formatDateSince(props.date)
: formatDisplayDate(props.date)
})
</script>