elk/components/account/AccountPostsFollowers.vue

65 lines
1.9 KiB
Vue
Raw Normal View History

2022-11-28 09:51:15 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-28 09:51:15 +00:00
defineProps<{
2023-01-08 06:21:09 +00:00
account: mastodon.v1.Account
isHoverCard?: boolean
2022-11-28 09:51:15 +00:00
}>()
const userSettings = useUserSettings()
2022-11-28 09:51:15 +00:00
</script>
<template>
<div flex gap-5>
<NuxtLink
:to="getAccountRoute(account)"
replace
text-secondary
exact-active-class="text-primary"
>
2022-11-28 10:14:58 +00:00
<template #default="{ isExactActive }">
<CommonLocalizedNumber
keypath="account.posts_count"
:count="account.statusesCount"
font-bold
:class="isExactActive ? 'text-primary' : 'text-base'"
/>
2022-11-28 10:14:58 +00:00
</template>
2022-11-28 09:51:15 +00:00
</NuxtLink>
<NuxtLink
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
:to="getAccountFollowingRoute(account)"
replace
text-secondary exact-active-class="text-primary"
>
2022-11-28 10:14:58 +00:00
<template #default="{ isExactActive }">
<CommonLocalizedNumber
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
keypath="account.following_count"
:count="account.followingCount"
font-bold
:class="isExactActive ? 'text-primary' : 'text-base'"
/>
<span v-else>{{ $t('account.following') }}</span>
2022-11-28 10:14:58 +00:00
</template>
2022-11-28 09:51:15 +00:00
</NuxtLink>
<NuxtLink
v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
:to="getAccountFollowersRoute(account)"
replace text-secondary
exact-active-class="text-primary"
>
2022-11-28 10:14:58 +00:00
<template #default="{ isExactActive }">
<CommonLocalizedNumber
v-if="!getPreferences(userSettings, 'hideFollowerCount')"
keypath="account.followers_count"
:count="account.followersCount"
font-bold
:class="isExactActive ? 'text-primary' : 'text-base'"
/>
<span v-else>{{ $t('account.followers') }}</span>
2022-11-28 10:14:58 +00:00
</template>
2022-11-28 09:51:15 +00:00
</NuxtLink>
</div>
</template>