elk/components/account/AccountPostsFollowers.vue

56 lines
1.4 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
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
2023-01-09 20:20:26 +00:00
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
:to="getAccountFollowingRoute(account)"
replace
text-secondary exact-active-class="text-primary"
>
2022-11-28 10:14:58 +00:00
<template #default="{ isExactActive }">
<CommonLocalizedNumber
2023-01-09 20:20:26 +00:00
keypath="account_following_count"
:count="account.followingCount"
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
:to="getAccountFollowersRoute(account)"
replace
text-secondary exact-active-class="text-primary"
>
2022-11-28 10:14:58 +00:00
<template #default="{ isExactActive }">
<CommonLocalizedNumber
2023-01-09 20:20:26 +00:00
keypath="account_followers_count"
:count="account.followersCount"
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>
</div>
</template>