37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<template>
|
|
<div class="bg-white shadow-lg rounded-lg overflow-hidden transition-all duration-300 ease-in-out py4">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h3 class="text-lg font-bold p-3">{{ content.title }}</h3>
|
|
</div>
|
|
<img v-if="content.urls !== null" :src="content.urls" alt="thumbnail" class="w-full ">
|
|
<div class="p-3">
|
|
<p class="text-gray-600 mb-4">{{ content.description }}</p>
|
|
<div class="flex items-center">
|
|
<router-link class="capitalize px-2" :to="`/@${props.content.createdByName}`">
|
|
<img :src="content.createdByPortraitUrl" alt="profile image" class="w-10 h-10 rounded-full">
|
|
</router-link>
|
|
<div class="ml-4">
|
|
<h4 class="text-md font-bold">{{ content.name }}</h4>
|
|
<div class="text-gray-600 text-sm">
|
|
<span>{{ content.reactions.length }} reactions</span> -
|
|
<span>{{ time_ago(content.createdAt) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
import {time_ago} from "@/internal_time_ago.js";
|
|
|
|
const props = defineProps({
|
|
content: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
</script>
|