62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { cn } from "@lume/utils";
|
|
import * as HoverCard from "@radix-ui/react-hover-card";
|
|
import { User } from "../user";
|
|
import { useNoteContext } from "./provider";
|
|
import { LumeWindow } from "@lume/system";
|
|
|
|
export function NoteUser({ className }: { className?: string }) {
|
|
const event = useNoteContext();
|
|
|
|
return (
|
|
<User.Provider pubkey={event.pubkey}>
|
|
<HoverCard.Root>
|
|
<User.Root
|
|
className={cn("flex items-start justify-between", className)}
|
|
>
|
|
<div className="flex w-full gap-2">
|
|
<HoverCard.Trigger className="shrink-0">
|
|
<User.Avatar className="size-8 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/15" />
|
|
</HoverCard.Trigger>
|
|
<div className="flex w-full items-center gap-3">
|
|
<div className="flex items-center gap-1">
|
|
<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
|
|
<User.NIP05 />
|
|
</div>
|
|
<div className="text-neutral-600 dark:text-neutral-400">·</div>
|
|
<User.Time
|
|
time={event.created_at}
|
|
className="text-neutral-600 dark:text-neutral-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</User.Root>
|
|
<HoverCard.Portal>
|
|
<HoverCard.Content
|
|
className="w-[300px] rounded-xl bg-black p-3 data-[side=bottom]:animate-slideUpAndFade data-[state=open]:transition-all dark:bg-white dark:shadow-none"
|
|
sideOffset={5}
|
|
side="right"
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
<User.Avatar className="size-11 rounded-lg object-cover" />
|
|
<div className="flex flex-col gap-2">
|
|
<div className="inline-flex items-center gap-1">
|
|
<User.Name className="font-semibold leading-tight text-white dark:text-neutral-900" />
|
|
<User.NIP05 />
|
|
</div>
|
|
<User.About className="line-clamp-3 text-sm text-white dark:text-neutral-900" />
|
|
<button
|
|
onClick={() => LumeWindow.openProfile(event.pubkey)}
|
|
className="mt-2 inline-flex h-9 w-full items-center justify-center rounded-lg bg-white text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
|
|
>
|
|
View profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<HoverCard.Arrow className="fill-black dark:fill-white" />
|
|
</HoverCard.Content>
|
|
</HoverCard.Portal>
|
|
</HoverCard.Root>
|
|
</User.Provider>
|
|
);
|
|
}
|