elk/components/account/AccountHeader.vue

95 lines
3.2 KiB
Vue
Raw Normal View History

2022-11-15 03:26:52 +00:00
<script setup lang="ts">
2022-11-22 09:48:43 +00:00
import type { Account, MastoClient } from 'masto'
2022-11-15 03:26:52 +00:00
const { account } = defineProps<{
account: Account
}>()
const relationship = $(useRelationship(account))
2022-11-22 09:48:43 +00:00
let masto: MastoClient
async function toggleFollow() {
relationship!.following = !relationship!.following
2022-11-22 09:48:43 +00:00
masto ??= await useMasto()
await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
2022-11-22 09:48:43 +00:00
}
2022-11-15 03:26:52 +00:00
const createdAt = $computed(() => {
const date = new Date(account.createdAt)
return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
})
</script>
<template>
<div flex flex-col>
2022-11-15 13:00:28 +00:00
<div border="b border">
2022-11-15 03:26:52 +00:00
<img h-50 w-full object-cover :src="account.header">
</div>
<div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>
<div flex justify-between>
<div flex flex-col gap-2>
<div p1>
<NuxtLink :to="`/@${account.acct}`">
<img :src="account.avatar" rounded w-20 h-20>
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="`/@${account.acct}`">
<CommonRichContent font-bold :content="getDisplayName(account)" />
2022-11-15 03:26:52 +00:00
<p op50>
@{{ account.acct }}
</p>
</NuxtLink>
</div>
<div flex gap-2>
<button v-if="relationship" flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group @click="toggleFollow">
2022-11-22 09:48:43 +00:00
<div rounded w-30 p2 group-hover="bg-rose/10">
{{ relationship?.following ? 'Unfollow' : relationship?.followedBy ? 'Follow back' : 'Follow' }}
2022-11-15 03:26:52 +00:00
</div>
</button>
2022-11-21 13:45:09 +00:00
<!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
2022-11-15 03:26:52 +00:00
<div rounded p2 group-hover="bg-rose/10">
<div i-ri:bell-line />
</div>
</button>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded p2 group-hover="bg-purple/10">
<div i-ri:more-2-fill />
</div>
2022-11-21 13:45:09 +00:00
</button> -->
2022-11-15 03:26:52 +00:00
</div>
</div>
<div>
<div text-4 text-gray-3 v-html="account.note" />
</div>
<div flex flex-col gap-1>
<div flex flex-col rounded p3 class="bg-purple/10">
<p text-gray text-3 uppercase>
Joined
</p>
<p text-3 text-gray-3>
{{ createdAt }}
</p>
</div>
<div v-for="field in account.fields" :key="field.name" flex flex-col rounded p3 class="bg-purple/10">
<p text-gray text-3 uppercase>
{{ field.name }}
</p>
<p text-3 text-purple-3 v-html="field.value" />
</div>
</div>
<div flex gap-5>
<NuxtLink :to="`/@${account.acct}/`">
<span font-bold>{{ account.statusesCount }}</span> Posts
</NuxtLink>
<NuxtLink :to="`/@${account.acct}/following`">
<span font-bold>{{ account.followingCount }}</span> Following
</NuxtLink>
<NuxtLink :to="`/@${account.acct}/followers`">
<span font-bold>{{ account.followersCount }}</span> Followers
</NuxtLink>
2022-11-15 03:26:52 +00:00
</div>
</div>
</div>
</template>