52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { COL_TYPES } from "@lume/utils";
|
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
import { Link } from "react-router-dom";
|
|
import { useArk } from "../../../hooks/useArk";
|
|
import { useProfile } from "../../../hooks/useProfile";
|
|
import { useColumnContext } from "../../column/provider";
|
|
|
|
export function MentionUser({ pubkey }: { pubkey: string }) {
|
|
const ark = useArk();
|
|
const cleanPubkey = ark.getCleanPubkey(pubkey);
|
|
|
|
const { isLoading, isError, user } = useProfile(pubkey);
|
|
const { addColumn } = useColumnContext();
|
|
|
|
return (
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger className="text-blue-500 break-words hover:text-blue-600">
|
|
{isLoading
|
|
? "@anon"
|
|
: isError
|
|
? pubkey
|
|
: `@${user?.name || user?.displayName || user?.username || "anon"}`}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content className="left-[50px] z-50 relative flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 focus:outline-none dark:border-neutral-900">
|
|
<DropdownMenu.Item asChild>
|
|
<Link
|
|
to={`/users/${cleanPubkey}`}
|
|
className="inline-flex items-center h-10 px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
|
|
>
|
|
View profile
|
|
</Link>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item asChild>
|
|
<button
|
|
type="button"
|
|
onClick={async () =>
|
|
await addColumn({
|
|
kind: COL_TYPES.user,
|
|
title: user?.name || user?.displayName || "Profile",
|
|
content: cleanPubkey,
|
|
})
|
|
}
|
|
className="inline-flex items-center h-10 px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
|
|
>
|
|
Pin
|
|
</button>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
);
|
|
}
|