elk/components/account/AccountInfo.vue

30 lines
842 B
Vue
Raw Normal View History

2022-11-13 06:34:43 +01:00
<script setup lang="ts">
2022-11-14 03:20:07 +01:00
import type { Account } from 'masto'
2022-11-13 06:34:43 +01:00
2022-11-23 04:48:01 +01:00
const { account, link = true, fullServer = false } = defineProps<{
2022-11-13 06:34:43 +01:00
account: Account
2022-11-21 11:16:04 +01:00
link?: boolean
2022-11-23 04:48:01 +01:00
fullServer?: boolean
2022-11-13 06:34:43 +01:00
}>()
2022-11-23 04:48:01 +01:00
const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
2022-11-13 06:34:43 +01:00
</script>
<template>
2022-11-23 08:46:34 +01:00
<div flex gap-3>
<div>
<NuxtLink :to="link ? getAccountPath(account) : null">
2022-11-23 08:46:34 +01:00
<AccountAvatar :account="account" w-12 h-12 />
2022-11-14 03:20:07 +01:00
</NuxtLink>
2022-11-13 06:34:43 +01:00
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
2022-11-24 07:18:05 +01:00
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
2022-11-21 07:55:31 +01:00
<p op35 text-sm>
2022-11-23 04:48:01 +01:00
{{ id }}
2022-11-13 06:34:43 +01:00
</p>
2022-11-23 01:00:52 +01:00
<slot name="bottom" />
2022-11-14 03:20:07 +01:00
</NuxtLink>
2022-11-14 03:56:48 +01:00
<slot />
2022-11-13 06:34:43 +01:00
</div>
</template>