61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
class="p-4 bg-white rounded-lg shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700 flex items-center space-x-4"
|
|
dir="auto"
|
|
>
|
|
<div class="flex-shrink-0">
|
|
<figure class="w-12 h-12" v-if="actor.avatar">
|
|
<img
|
|
class="rounded-lg"
|
|
:src="actor.avatar.url"
|
|
alt=""
|
|
width="48"
|
|
height="48"
|
|
/>
|
|
</figure>
|
|
<b-icon
|
|
v-else
|
|
size="is-large"
|
|
icon="account-circle"
|
|
class="ltr:-mr-0.5 rtl:-ml-0.5"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<h5
|
|
class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-white"
|
|
>
|
|
{{ displayName(actor) }}
|
|
</h5>
|
|
<p class="text-gray-500 truncate dark:text-gray-400" v-if="actor.name">
|
|
<span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
|
|
</p>
|
|
<div
|
|
v-if="full"
|
|
class="line-clamp-3"
|
|
:class="{ limit: limit }"
|
|
v-html="actor.summary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
import { displayName, IActor, usernameWithDomain } from "../../types/actor";
|
|
|
|
@Component
|
|
export default class ActorCard extends Vue {
|
|
@Prop({ required: true, type: Object }) actor!: IActor;
|
|
|
|
@Prop({ required: false, type: Boolean, default: false }) full!: boolean;
|
|
|
|
@Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
|
|
|
|
@Prop({ required: false, type: Boolean, default: true }) limit!: boolean;
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
|
|
|
displayName = displayName;
|
|
}
|
|
</script>
|