51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<template>
|
|
<div :class="['flex gap-3 items-center', { 'gap-2': compact }]">
|
|
<v-avatar
|
|
:image="publisherAvatar"
|
|
:size="compact ? 24 : 40"
|
|
:border="compact"
|
|
@click="router.push('/publishers/' + props.item.publisher.name)"
|
|
/>
|
|
<div class="grow flex flex-col">
|
|
<p v-if="compact" class="flex gap-1 items-baseline text-sm">
|
|
<span class="font-bold">{{ props.item.publisher.nick }}</span>
|
|
<span class="text-xs opacity-80">{{
|
|
DateTime.fromISO(props.item.createdAt).toRelative()
|
|
}}</span>
|
|
</p>
|
|
<template v-else>
|
|
<p class="flex gap-1 items-baseline">
|
|
<span class="font-bold">{{ props.item.publisher.nick }}</span>
|
|
<span class="text-xs">@{{ props.item.publisher.name }}</span>
|
|
</p>
|
|
<p class="text-xs flex gap-1">
|
|
<span>{{ DateTime.fromISO(props.item.createdAt).toRelative() }}</span>
|
|
<span class="font-bold">·</span>
|
|
<span>{{
|
|
DateTime.fromISO(props.item.createdAt).toLocaleString()
|
|
}}</span>
|
|
</p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from "vue"
|
|
import { DateTime } from "luxon"
|
|
import type { SnPost } from "~/types/api"
|
|
|
|
const router = useRouter()
|
|
|
|
const props = withDefaults(defineProps<{ item: SnPost; compact?: boolean }>(), {
|
|
compact: false
|
|
})
|
|
|
|
const apiBase = useSolarNetworkUrl()
|
|
const publisherAvatar = computed(() =>
|
|
props.item.publisher.picture
|
|
? `${apiBase}/drive/files/${props.item.publisher.picture.id}`
|
|
: undefined
|
|
)
|
|
</script>
|