141 lines
4.5 KiB
TypeScript
141 lines
4.5 KiB
TypeScript
import * as Popover from '@radix-ui/react-popover';
|
|
import { Link } from 'react-router-dom';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import { Image } from '@shared/image';
|
|
|
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
|
|
|
import { formatCreatedAt } from '@utils/createdAt';
|
|
import { useProfile } from '@utils/hooks/useProfile';
|
|
import { displayNpub, shortenKey } from '@utils/shortenKey';
|
|
|
|
export function User({
|
|
pubkey,
|
|
time,
|
|
size,
|
|
isRepost = false,
|
|
isChat = false,
|
|
}: {
|
|
pubkey: string;
|
|
time: number;
|
|
size?: string;
|
|
isRepost?: boolean;
|
|
isChat?: boolean;
|
|
}) {
|
|
const { status, user } = useProfile(pubkey);
|
|
const createdAt = formatCreatedAt(time, isChat);
|
|
|
|
const avatarWidth = size === 'small' ? 'w-6' : 'w-11';
|
|
const avatarHeight = size === 'small' ? 'h-6' : 'h-11';
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<div
|
|
className={`relative flex gap-3 ${
|
|
size === 'small' ? 'items-center' : 'items-start'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`${avatarWidth} ${avatarHeight} ${
|
|
size === 'small' ? 'rounded' : 'rounded-lg'
|
|
} relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10`}
|
|
/>
|
|
<div className="flex flex-wrap items-baseline gap-1">
|
|
<div className="h-3.5 w-36 animate-pulse rounded bg-white/10" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Popover.Root>
|
|
<div
|
|
className={twMerge(
|
|
'relative z-10 flex',
|
|
size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
|
|
)}
|
|
>
|
|
<Popover.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className={`${avatarWidth} ${avatarHeight} relative z-40 shrink-0 overflow-hidden`}
|
|
>
|
|
<Image
|
|
src={user?.picture || user?.image}
|
|
fallback={DEFAULT_AVATAR}
|
|
alt={pubkey}
|
|
className={twMerge(
|
|
`object-cover ${avatarWidth} ${avatarHeight}`,
|
|
size === 'small' ? 'rounded' : 'rounded-lg',
|
|
isRepost ? 'ring-1 ring-zinc-800' : ''
|
|
)}
|
|
/>
|
|
</button>
|
|
</Popover.Trigger>
|
|
<div
|
|
className={twMerge('flex flex-1 items-baseline gap-2', isRepost ? 'mt-4' : '')}
|
|
>
|
|
<h5
|
|
className={twMerge(
|
|
'truncate font-semibold leading-none text-white',
|
|
size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
|
|
)}
|
|
>
|
|
{user?.nip05?.toLowerCase() ||
|
|
user?.name ||
|
|
user?.display_name ||
|
|
shortenKey(pubkey)}
|
|
</h5>
|
|
<span className="leading-none text-white/50">·</span>
|
|
<span className="leading-none text-white/50">{createdAt}</span>
|
|
</div>
|
|
</div>
|
|
<Popover.Portal>
|
|
<Popover.Content
|
|
className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none"
|
|
sideOffset={5}
|
|
>
|
|
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
|
|
<Image
|
|
src={user?.picture || user?.image}
|
|
fallback={DEFAULT_AVATAR}
|
|
alt={pubkey}
|
|
className="h-11 w-11 shrink-0 rounded-lg object-cover"
|
|
/>
|
|
<div className="flex flex-1 flex-col gap-2">
|
|
<div className="inline-flex flex-col gap-1">
|
|
<h5 className="text-sm font-semibold leading-none">
|
|
{user?.display_name || user?.name || user?.username}
|
|
</h5>
|
|
<span className="max-w-[10rem] truncate text-sm leading-none text-white/50">
|
|
{user?.nip05 || displayNpub(pubkey, 16)}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p className="line-clamp-3 break-all leading-tight text-white">
|
|
{user?.about}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 px-3 py-3">
|
|
<Link
|
|
to={`/users/${pubkey}`}
|
|
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
|
>
|
|
View profile
|
|
</Link>
|
|
<Link
|
|
to={`/chats/${pubkey}`}
|
|
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
|
|
>
|
|
Message
|
|
</Link>
|
|
</div>
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover.Root>
|
|
);
|
|
}
|