2020-02-18 08:57:00 +01:00
|
|
|
<template>
|
2022-01-13 15:04:43 +01:00
|
|
|
<div
|
2022-03-23 12:33:27 +01:00
|
|
|
class="w-80 bg-white rounded-lg shadow-md flex space-x-4 items-center"
|
|
|
|
:class="{ 'flex-col p-4 sm:p-8 pb-10': !inline }"
|
2022-01-14 18:10:50 +01:00
|
|
|
>
|
2022-03-23 12:33:27 +01:00
|
|
|
<div>
|
|
|
|
<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="inline ? 'is-medium' : 'is-large'"
|
|
|
|
icon="account-circle"
|
|
|
|
class="ltr:-mr-0.5 rtl:-ml-0.5"
|
2022-01-14 18:10:50 +01:00
|
|
|
/>
|
2022-03-23 12:33:27 +01:00
|
|
|
</div>
|
|
|
|
<div :class="{ 'text-center': !inline }">
|
|
|
|
<h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
|
|
|
|
{{ displayName(actor) }}
|
|
|
|
</h5>
|
|
|
|
<p class="text-gray-500 truncate" v-if="actor.name">
|
|
|
|
<span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
v-if="full"
|
|
|
|
:class="{ 'line-clamp-3': limit }"
|
|
|
|
v-html="actor.summary"
|
|
|
|
/>
|
|
|
|
</div>
|
2022-01-14 18:10:50 +01:00
|
|
|
</div>
|
|
|
|
<!-- <div
|
|
|
|
class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
|
2022-01-13 15:04:43 +01:00
|
|
|
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"
|
|
|
|
/>
|
2021-11-07 14:59:20 +01:00
|
|
|
</figure>
|
2022-01-13 15:04:43 +01:00
|
|
|
<b-icon
|
|
|
|
v-else
|
|
|
|
size="is-large"
|
|
|
|
icon="account-circle"
|
|
|
|
class="ltr:-mr-0.5 rtl:-ml-0.5"
|
|
|
|
/>
|
2021-11-07 14:59:20 +01:00
|
|
|
</div>
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-01-13 15:04:43 +01:00
|
|
|
<div class="flex-1 min-w-0">
|
2022-01-14 18:10:50 +01:00
|
|
|
<h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
|
2022-01-13 15:04:43 +01:00
|
|
|
{{ displayName(actor) }}
|
|
|
|
</h5>
|
2022-01-14 18:10:50 +01:00
|
|
|
<p class="text-gray-500 truncate" v-if="actor.name">
|
2021-11-07 21:02:06 +01:00
|
|
|
<span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
|
2021-11-07 14:59:20 +01:00
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
v-if="full"
|
2022-01-13 15:04:43 +01:00
|
|
|
class="line-clamp-3"
|
2021-11-07 14:59:20 +01:00
|
|
|
:class="{ limit: limit }"
|
|
|
|
v-html="actor.summary"
|
|
|
|
/>
|
2020-02-18 08:57:00 +01:00
|
|
|
</div>
|
2022-01-14 18:10:50 +01:00
|
|
|
</div> -->
|
2020-02-18 08:57:00 +01:00
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
2022-01-13 15:04:43 +01:00
|
|
|
import { displayName, IActor, usernameWithDomain } from "../../types/actor";
|
2020-02-18 08:57:00 +01:00
|
|
|
|
|
|
|
@Component
|
|
|
|
export default class ActorCard extends Vue {
|
|
|
|
@Prop({ required: true, type: Object }) actor!: IActor;
|
|
|
|
|
|
|
|
@Prop({ required: false, type: Boolean, default: false }) full!: boolean;
|
|
|
|
|
2022-03-23 12:33:27 +01:00
|
|
|
@Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
|
|
|
|
|
2020-06-16 12:03:09 +02:00
|
|
|
@Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
|
|
|
|
|
|
|
|
@Prop({ required: false, type: Boolean, default: true }) limit!: boolean;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
|
|
|
|
2022-01-13 15:04:43 +01:00
|
|
|
displayName = displayName;
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
2022-01-13 15:04:43 +01:00
|
|
|
</script>
|