yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { ChevronRightIcon } from "@heroicons/react/24/outline";
2import { CheckBadgeIcon } from "@heroicons/react/24/solid";
3import { TRANSFORMS } from "@hey/data/constants";
4import getAccount from "@hey/helpers/getAccount";
5import getAvatar from "@hey/helpers/getAvatar";
6import type {
7 AccountFragment,
8 AnyPostFragment,
9 PostGroupInfoFragment
10} from "@hey/indexer";
11import { memo } from "react";
12import { Link } from "react-router";
13import AccountLink from "@/components/Shared/Account/AccountLink";
14import AccountPreview from "@/components/Shared/Account/AccountPreview";
15import PostLink from "@/components/Shared/Post/PostLink";
16import { Image } from "@/components/Shared/UI";
17import formatRelativeOrAbsolute from "@/helpers/datetime/formatRelativeOrAbsolute";
18
19interface PostAccountProps {
20 account: AccountFragment;
21 group?: PostGroupInfoFragment;
22 post: AnyPostFragment;
23 timestamp: Date;
24}
25
26const PostAccount = ({ account, group, post, timestamp }: PostAccountProps) => {
27 return (
28 <div className="flex flex-col">
29 <div className="flex flex-wrap items-center gap-x-1">
30 <AccountLink
31 account={account}
32 className="outline-hidden hover:underline focus:underline"
33 >
34 <AccountPreview
35 address={account.address}
36 showUserPreview
37 username={account.username?.localName}
38 >
39 <span className="flex items-center gap-x-1 font-semibold">
40 {account.preferNameInFeed
41 ? getAccount(account).name
42 : getAccount(account).username}
43 {account.hasSubscribed && (
44 <CheckBadgeIcon className="size-4 text-brand-500" />
45 )}
46 {account.heyEns?.localName && (
47 <Image
48 className="size-4"
49 src="https://ens.domains/assets/brand/mark/ens-mark-Blue.svg"
50 />
51 )}
52 </span>
53 </AccountPreview>
54 </AccountLink>
55 {group?.metadata ? (
56 <>
57 <ChevronRightIcon className="size-4 text-gray-500" />
58 <Link
59 className="flex items-center gap-x-1 hover:underline focus:underline"
60 to={`/g/${group.address}`}
61 >
62 <Image
63 alt={group.metadata.name}
64 className="size-4 rounded-sm"
65 src={getAvatar(group, TRANSFORMS.AVATAR_TINY)}
66 />
67 <span className="truncate text-sm">{group.metadata.name}</span>
68 </Link>
69 </>
70 ) : null}
71 {timestamp ? (
72 <span className="ml-1 text-gray-500 dark:text-gray-200">
73 <PostLink className="text-sm hover:underline" post={post}>
74 {formatRelativeOrAbsolute(timestamp)}
75 </PostLink>
76 </span>
77 ) : null}
78 </div>
79 </div>
80 );
81};
82
83export default memo(PostAccount);