108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
import { Image } from "@shared/image";
|
|
|
|
import { DEFAULT_AVATAR, IMGPROXY_URL } from "@stores/constants";
|
|
|
|
import { useProfile } from "@utils/hooks/useProfile";
|
|
import { shortenKey } from "@utils/shortenKey";
|
|
|
|
import { Popover, Transition } from "@headlessui/react";
|
|
import dayjs from "dayjs";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
import { Fragment } from "react";
|
|
|
|
dayjs.extend(relativeTime);
|
|
|
|
export function NoteRepostUser({
|
|
pubkey,
|
|
time,
|
|
}: { pubkey: string; time: number }) {
|
|
const { user } = useProfile(pubkey);
|
|
|
|
return (
|
|
<Popover className="relative flex items-center gap-2.5">
|
|
<Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
|
|
<Image
|
|
src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${
|
|
user?.picture ? user.picture : DEFAULT_AVATAR
|
|
}`}
|
|
alt={pubkey}
|
|
className="h-9 w-9 rounded-md object-cover"
|
|
/>
|
|
</Popover.Button>
|
|
<div className="flex items-baseline gap-1.5 text-base">
|
|
<h5 className="font-semibold leading-tight group-hover:underline">
|
|
{user?.display_name || user?.name || (
|
|
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
|
|
)}
|
|
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
|
|
{" "}
|
|
reposted
|
|
</span>
|
|
</h5>
|
|
<span className="leading-tight text-zinc-500">·</span>
|
|
<span className="text-zinc-500">
|
|
{dayjs().to(dayjs.unix(time), true)}
|
|
</span>
|
|
</div>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel className="absolute left-0 top-8 z-10 mt-3 w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
|
|
<div
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
className="w-full max-w-xs overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<div className="flex items-start gap-2.5 border-b border-zinc-800 px-3 py-3">
|
|
<Image
|
|
src={`${IMGPROXY_URL}/rs:fit:200:200/plain/${
|
|
user?.picture ? user.picture : DEFAULT_AVATAR
|
|
}`}
|
|
alt={pubkey}
|
|
className="h-14 w-14 shrink-0 rounded-lg object-cover"
|
|
/>
|
|
<div className="flex w-full flex-1 flex-col gap-2">
|
|
<div className="inline-flex w-2/3 flex-col gap-0.5">
|
|
<h5 className="text-base font-semibold leading-none">
|
|
{user?.display_name || user?.name || (
|
|
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
|
|
)}
|
|
</h5>
|
|
<span className="truncate text-base leading-none text-zinc-500">
|
|
{user?.nip05 || shortenKey(pubkey)}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p className="line-clamp-3 text-base leading-tight text-white">
|
|
{user?.about}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 px-3 py-3">
|
|
<a
|
|
href={`/app/user?pubkey=${pubkey}`}
|
|
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
|
|
>
|
|
View full profile
|
|
</a>
|
|
<a
|
|
href={`/app/chat?pubkey=${pubkey}`}
|
|
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-base font-medium"
|
|
>
|
|
Message
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</Popover>
|
|
);
|
|
}
|