57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { Image } from "@shared/image";
|
|
|
|
import { DEFAULT_AVATAR } from "@stores/constants";
|
|
|
|
import { useActiveAccount } from "@utils/hooks/useActiveAccount";
|
|
import { usePageContext } from "@utils/hooks/usePageContext";
|
|
import { shortenKey } from "@utils/shortenKey";
|
|
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export default function ChatsListSelfItem() {
|
|
const pageContext = usePageContext();
|
|
|
|
const searchParams: any = pageContext.urlParsed.search;
|
|
const pagePubkey = searchParams.pubkey;
|
|
|
|
const { account, isLoading, isError } = useActiveAccount();
|
|
|
|
return (
|
|
<>
|
|
{isError && <div>error</div>}
|
|
{isLoading && !account ? (
|
|
<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
|
|
<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
|
|
<div>
|
|
<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<a
|
|
href={`/app/chat?pubkey=${account.pubkey}`}
|
|
className={twMerge(
|
|
"inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
|
|
pagePubkey === account.pubkey
|
|
? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
|
: "",
|
|
)}
|
|
>
|
|
<div className="relative h-5 w-5 shrink-0 rounded">
|
|
<Image
|
|
src={account?.picture || DEFAULT_AVATAR}
|
|
alt={account.pubkey}
|
|
className="h-5 w-5 rounded bg-white object-cover"
|
|
/>
|
|
</div>
|
|
<div className="inline-flex items-baseline">
|
|
<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
|
|
{account?.nip05 || account?.name || shortenKey(account.pubkey)}
|
|
</h5>
|
|
<span className="text-zinc-600">(you)</span>
|
|
</div>
|
|
</a>
|
|
)}
|
|
</>
|
|
);
|
|
}
|