Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import getAccount from "@hey/helpers/getAccount";
2import type { AccountFragment } from "@hey/indexer";
3import type { ReactNode } from "react";
4import { memo } from "react";
5import AccountLink from "@/components/Shared/Account/AccountLink";
6import cn from "@/helpers/cn";
7import Slug from "./Slug";
8
9interface FallbackAccountNameProps {
10 className?: string;
11 account?: AccountFragment;
12 separator?: ReactNode;
13}
14
15const FallbackAccountName = ({
16 className = "",
17 account,
18 separator = ""
19}: FallbackAccountNameProps) => {
20 if (!account) {
21 return null;
22 }
23
24 const { name, username } = getAccount(account);
25 const accountName = account?.metadata?.name || <Slug slug={username} />;
26
27 return (
28 <>
29 <AccountLink
30 account={account}
31 aria-label={`Account of ${name || username}`}
32 className={cn(
33 "max-w-sm truncate outline-hidden hover:underline focus:underline",
34 className
35 )}
36 >
37 <b className="whitespace-nowrap">{accountName}</b>
38 </AccountLink>
39 {separator && <span>{separator}</span>}
40 </>
41 );
42};
43
44export default memo(FallbackAccountName);