elk/components/account/AccountInfo.vue
2022-11-24 14:18:05 +08:00

30 lines
842 B
Vue

<script setup lang="ts">
import type { Account } from 'masto'
const { account, link = true, fullServer = false } = defineProps<{
account: Account
link?: boolean
fullServer?: boolean
}>()
const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
</script>
<template>
<div flex gap-3>
<div>
<NuxtLink :to="link ? getAccountPath(account) : null">
<AccountAvatar :account="account" w-12 h-12 />
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm>
{{ id }}
</p>
<slot name="bottom" />
</NuxtLink>
<slot />
</div>
</template>