elk/components/account/AccountCard.vue
2022-11-22 10:48:43 +01:00

35 lines
881 B
Vue

<script setup lang="ts">
import type { Account } from 'masto'
const { account, following } = defineProps<{
account: Account
following?: boolean
}>()
const masto = await useMasto()
let isFollowing = $ref<boolean | undefined>(following)
watch($$(following), () => {
isFollowing = following
})
function unfollow() {
masto.accounts.unfollow(account.id)
isFollowing = false
}
function follow() {
masto.accounts.follow(account.id)
isFollowing = true
}
</script>
<template>
<div flex justify-between>
<AccountInfo :account="account" p3 />
<div h-full p5>
<div v-if="isFollowing === true" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill @click="unfollow" />
<div v-else-if="isFollowing === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
</div>
</div>
</template>