ui: improve fields display
parent
1ee945447d
commit
8c9eac5789
|
@ -9,6 +9,40 @@ const createdAt = $computed(() => {
|
|||
const date = new Date(account.createdAt)
|
||||
return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
|
||||
})
|
||||
|
||||
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]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -48,30 +82,23 @@ const createdAt = $computed(() => {
|
|||
<div>
|
||||
<div text-4 text-gray v-html="account.note" />
|
||||
</div>
|
||||
<div flex flex-col gap-1>
|
||||
<div flex flex-col rounded p3 class="bg-purple/10">
|
||||
<p text="gray/70" text-3 uppercase>
|
||||
Joined
|
||||
</p>
|
||||
<p text-3 text-gray>
|
||||
{{ createdAt }}
|
||||
</p>
|
||||
<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>
|
||||
<div v-for="field in account.fields" :key="field.name" flex flex-col rounded p3 class="bg-purple/10">
|
||||
<p text="gray/70" text-3 uppercase>
|
||||
{{ field.name }}
|
||||
</p>
|
||||
<p text-3 text-purple-3 v-html="field.value" />
|
||||
<ContentRich text-sm filter-saturate-0 :content="field.value" />
|
||||
</div>
|
||||
</div>
|
||||
<div flex gap-5>
|
||||
<NuxtLink :to="`/${getAccountHandle(account)}/`" active-class="text-primary">
|
||||
<NuxtLink :to="`/${getAccountHandle(account)}/`" exact-active-class="text-primary">
|
||||
<span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="`/${getAccountHandle(account)}/following`" active-class="text-primary">
|
||||
<NuxtLink :to="`/${getAccountHandle(account)}/following`" exact-active-class="text-primary">
|
||||
<span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="`/${getAccountHandle(account)}/followers`" active-class="text-primary">
|
||||
<NuxtLink :to="`/${getAccountHandle(account)}/followers`" exact-active-class="text-primary">
|
||||
<span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue