elk/components/account/AccountFollowButton.vue

44 lines
1.4 KiB
Vue
Raw Normal View History

2022-11-22 22:40:20 +00:00
<script setup lang="ts">
2022-11-22 23:08:36 +00:00
import type { Account } from 'masto'
2022-11-22 22:40:20 +00:00
const { account } = defineProps<{
account: Account
}>()
2022-11-24 15:48:52 +00:00
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
2022-11-26 12:58:10 +00:00
let relationship = $(useRelationship(account))
2022-11-22 22:40:20 +00:00
async function toggleFollow() {
relationship!.following = !relationship!.following
2022-11-26 12:58:10 +00:00
try {
relationship = await useMasto().accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
2022-11-26 12:58:10 +00:00
}
catch {
// TODO error handling
relationship!.following = !relationship!.following
}
2022-11-22 22:40:20 +00:00
}
</script>
<template>
<button
2022-11-28 09:51:15 +00:00
v-if="!isSelf"
2022-11-24 08:54:52 +00:00
flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group
@click="toggleFollow"
>
2022-11-24 08:54:52 +00:00
<div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/75' : 'bg-orange/40'" :class="!relationship?.following ? relationship?.followedBy ? 'bg-orange/20' : 'bg-white/10' : relationship?.followedBy ? ' bg-orange/70' : 'bg-orange/50'">
2022-11-22 22:40:20 +00:00
<template v-if="relationship?.following">
2022-11-25 17:39:50 +00:00
<span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
2022-11-22 22:40:20 +00:00
<span hidden group-hover="inline">Unfollow</span>
</template>
2022-11-24 08:54:52 +00:00
<template v-else-if="relationship?.followedBy">
<span group-hover="hidden">Follows you</span>
<span hidden group-hover="inline">Follow back</span>
</template>
2022-11-22 22:40:20 +00:00
<template v-else>
2022-11-24 08:54:52 +00:00
<span>Follow</span>
2022-11-22 22:40:20 +00:00
</template>
</div>
</button>
</template>