yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { TRANSFORMS } from "@hey/data/constants";
2import getAvatar from "@hey/helpers/getAvatar";
3import type { GroupFragment } from "@hey/indexer";
4import { memo } from "react";
5import { Link } from "react-router";
6import Markup from "@/components/Shared/Markup";
7import { Image } from "@/components/Shared/UI";
8import cn from "@/helpers/cn";
9import getMentions from "@/helpers/getMentions";
10import JoinLeaveButton from "./JoinLeaveButton";
11
12interface SingleGroupProps {
13 hideJoinButton?: boolean;
14 hideLeaveButton?: boolean;
15 isBig?: boolean;
16 linkToGroup?: boolean;
17 showDescription?: boolean;
18 group: GroupFragment;
19}
20
21const SingleGroup = ({
22 hideJoinButton = false,
23 hideLeaveButton = false,
24 isBig = false,
25 linkToGroup = true,
26 showDescription = false,
27 group
28}: SingleGroupProps) => {
29 const GroupAvatar = () => (
30 <Image
31 alt={group.address}
32 className={cn(
33 isBig ? "size-14" : "size-11",
34 "rounded-lg border border-gray-200 bg-gray-200 dark:border-gray-700"
35 )}
36 height={isBig ? 56 : 44}
37 loading="lazy"
38 src={getAvatar(group, TRANSFORMS.AVATAR_BIG)}
39 width={isBig ? 56 : 44}
40 />
41 );
42
43 const GroupInfo = () => (
44 <div className="mr-8 flex items-center space-x-3">
45 <GroupAvatar />
46 <div>
47 <div className="truncate font-semibold">{group.metadata?.name}</div>
48 {showDescription && group.metadata?.description && (
49 <div
50 className="linkify mt-2 text-base leading-6"
51 style={{ wordBreak: "break-word" }}
52 >
53 <Markup mentions={getMentions(group.metadata.description)}>
54 {group.metadata.description}
55 </Markup>
56 </div>
57 )}
58 </div>
59 </div>
60 );
61
62 return (
63 <div className="flex items-center justify-between">
64 {linkToGroup ? (
65 <Link to={`/g/${group.address}`}>
66 <GroupInfo />
67 </Link>
68 ) : (
69 <GroupInfo />
70 )}
71 <JoinLeaveButton
72 group={group}
73 hideJoinButton={hideJoinButton}
74 hideLeaveButton={hideLeaveButton}
75 small
76 />
77 </div>
78 );
79};
80
81export default memo(SingleGroup);