elk/components/account/AccountHeader.vue

108 lines
3.5 KiB
Vue
Raw Normal View History

2022-11-15 03:26:52 +00:00
<script setup lang="ts">
2022-11-22 22:40:20 +00:00
import type { Account } from 'masto'
2022-11-15 03:26:52 +00:00
const { account } = defineProps<{
account: Account
}>()
const createdAt = $computed(() => {
const date = new Date(account.createdAt)
return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
})
2022-11-24 06:41:29 +00:00
const fields = $computed(() => {
return [
...account.fields || [],
{
name: 'Joined',
value: createdAt,
},
]
})
const fieldNameIcons: Record<string, string> = {
github: 'i-ri:github-fill',
twitter: 'i-ri:twitter-line',
mastodon: 'i-ri:mastodon-line',
youtube: 'i-ri:youtube-line',
twitch: 'i-ri:twitch-line',
instagram: 'i-ri:instagram-line',
website: 'i-ri:link',
site: 'i-ri:link',
blog: 'i-ri:newspaper-line',
home: 'i-ri:home-2-line',
sponsors: 'i-ri:heart-3-line',
location: 'i-ri:map-pin-2-line',
city: 'i-ri:map-pin-2-line',
joined: 'i-ri:user-add-line',
birth: 'i-ri:calendar-line',
}
function getFieldNameIcon(fieldName: string) {
const name = fieldName.trim().toLowerCase()
if (fieldNameIcons[name])
return fieldNameIcons[name]
}
2022-11-15 03:26:52 +00:00
</script>
<template>
<div flex flex-col>
2022-11-23 02:16:31 +00:00
<div border="b base">
2022-11-15 03:26:52 +00:00
<img h-50 w-full object-cover :src="account.header">
</div>
2022-11-23 07:46:34 +00:00
<div p4 mt--17 flex flex-col gap-6>
2022-11-15 03:26:52 +00:00
<div flex justify-between>
<div flex flex-col gap-2>
2022-11-23 07:46:34 +00:00
<div>
<NuxtLink :to="getAccountPath(account)">
2022-11-23 07:46:34 +00:00
<AccountAvatar :account="account" w-30 h-30 />
2022-11-15 03:26:52 +00:00
</NuxtLink>
</div>
2022-11-23 14:39:48 +00:00
<div flex flex-col>
2022-11-24 06:18:05 +00:00
<ContentRich font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
2022-11-15 03:26:52 +00:00
<p op50>
{{ getAccountHandle(account) }}
2022-11-15 03:26:52 +00:00
</p>
2022-11-23 14:39:48 +00:00
</div>
2022-11-15 03:26:52 +00:00
</div>
2022-11-23 14:39:48 +00:00
<div flex gap-2 items-center>
2022-11-22 22:40:20 +00:00
<AccountFollowButton :account="account" />
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>
2022-11-23 08:37:31 +00:00
<div text-4 text-gray v-html="account.note" />
2022-11-15 03:26:52 +00:00
</div>
2022-11-24 06:41:29 +00:00
<div flex flex-wrap gap-4>
<div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center>
<div v-if="getFieldNameIcon(field.name)" op50 :class="getFieldNameIcon(field.name)" :title="field.name" />
<div v-else op50 uppercase text-xs font-bold>
{{ field.name }} |
</div>
<ContentRich text-sm filter-saturate-0 :content="field.value" />
2022-11-15 03:26:52 +00:00
</div>
</div>
<div flex gap-5>
2022-11-24 06:41:29 +00:00
<NuxtLink :to="`/${getAccountHandle(account)}/`" exact-active-class="text-primary">
2022-11-24 06:18:05 +00:00
<span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
</NuxtLink>
2022-11-24 06:41:29 +00:00
<NuxtLink :to="`/${getAccountHandle(account)}/following`" exact-active-class="text-primary">
2022-11-24 06:18:05 +00:00
<span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
</NuxtLink>
2022-11-24 06:41:29 +00:00
<NuxtLink :to="`/${getAccountHandle(account)}/followers`" exact-active-class="text-primary">
2022-11-24 06:18:05 +00:00
<span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
</NuxtLink>
2022-11-15 03:26:52 +00:00
</div>
</div>
</div>
</template>