diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue new file mode 100644 index 00000000..aefcd703 --- /dev/null +++ b/components/account/AccountHoverCard.vue @@ -0,0 +1,33 @@ +<script setup lang="ts"> +import type { Account } from 'masto' + +defineProps<{ + account: Account +}>() +</script> + +<template> + <div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card"> + <AccountInfo :account="account" /> + <div text-sm flex flex-row text-gray mt-4> + <NuxtLink :to="`/${getAccountHandle(account)}/`"> + {{ account.statusesCount }} Posts + </NuxtLink> + <span flex-1 text-center> • </span> + <NuxtLink :to="`/${getAccountHandle(account)}/following`"> + {{ account.followingCount }} Following + </NuxtLink> + <span flex-1 text-center> • </span> + <NuxtLink :to="`/${getAccountHandle(account)}/followers`"> + {{ account.followersCount }} Followers + </NuxtLink> + </div> + <ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" /> + </div> +</template> + +<style> +.account-hover-card { + transform-origin: 3em 3em; +} +</style> diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue index 28a95bb9..c93cd1fd 100644 --- a/components/status/StatusCard.vue +++ b/components/status/StatusCard.vue @@ -79,7 +79,12 @@ const timeago = useTimeAgo(() => status.createdAt, { </div> </div> <div flex gap-4> - <AccountAvatar mt1 w-12 h-12 :account="status.account" /> + <div relative flex-shrink-0> + <div group> + <AccountHoverCard top="-3.2" left="-4.4" absolute :account="status.account" op0 pointer-events-none group-hover="pointer-events-auto op100 scale-100" delay-250 transition transform scale-20 class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]" /> + <AccountAvatar mt1 w-12 h-12 :account="status.account" /> + </div> + </div> <div flex="~ col 1"> <div flex> <StatusAccountDetails :account="status.account" />