Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: replace usernameWithPrefix with username in account-related components for consistency
1import { CheckBadgeIcon } from "@heroicons/react/24/solid";
2import getAccount from "@hey/helpers/getAccount";
3import getAvatar from "@hey/helpers/getAvatar";
4import type { AccountFragment } from "@hey/indexer";
5import { memo } from "react";
6import Slug from "@/components/Shared/Slug";
7import { Image } from "@/components/Shared/UI";
8import cn from "@/helpers/cn";
9import formatRelativeOrAbsolute from "@/helpers/datetime/formatRelativeOrAbsolute";
10import AccountLink from "./AccountLink";
11
12interface SmallSingleAccountProps {
13 hideSlug?: boolean;
14 linkToAccount?: boolean;
15 account: AccountFragment;
16 smallAvatar?: boolean;
17 timestamp?: Date;
18}
19
20const SmallSingleAccount = ({
21 hideSlug = false,
22 linkToAccount = false,
23 account,
24 smallAvatar = false,
25 timestamp
26}: SmallSingleAccountProps) => {
27 const UserAvatar = () => (
28 <Image
29 alt={account.address}
30 className={cn(
31 smallAvatar ? "size-4" : "size-6",
32 "rounded-full border border-gray-200 bg-gray-200 dark:border-gray-700"
33 )}
34 height={smallAvatar ? 16 : 24}
35 loading="lazy"
36 src={getAvatar(account)}
37 width={smallAvatar ? 16 : 24}
38 />
39 );
40
41 const UserName = () => (
42 <div className="flex max-w-full flex-wrap items-center">
43 <div
44 className={cn(
45 !hideSlug && "max-w-[75%]",
46 "mr-1 flex items-center gap-x-1 truncate"
47 )}
48 >
49 {getAccount(account).name}
50 {account.hasSubscribed ? (
51 <CheckBadgeIcon className="size-4 text-brand-500" />
52 ) : null}
53 </div>
54 {!hideSlug && (
55 <Slug className="text-sm" slug={getAccount(account).username} />
56 )}
57 {timestamp && (
58 <span className="text-gray-500 dark:text-gray-200">
59 <span className="mx-1.5">路</span>
60 <span className="text-xs">{formatRelativeOrAbsolute(timestamp)}</span>
61 </span>
62 )}
63 </div>
64 );
65
66 const AccountInfo = () => (
67 <div className="flex items-center space-x-2">
68 <UserAvatar />
69 <UserName />
70 </div>
71 );
72
73 return linkToAccount ? (
74 <AccountLink account={account}>
75 <AccountInfo />
76 </AccountLink>
77 ) : (
78 <AccountInfo />
79 );
80};
81
82export default memo(SmallSingleAccount);