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 { useCallback, useState } from "react";
5import { useNavigate } from "react-router";
6import JoinLeaveButton from "@/components/Shared/Group/JoinLeaveButton";
7import Markup from "@/components/Shared/Markup";
8import { Button, H3, Image, LightBox } from "@/components/Shared/UI";
9import getMentions from "@/helpers/getMentions";
10import { useAccountStore } from "@/store/persisted/useAccountStore";
11import MembersCount from "./MembersCount";
12
13interface DetailsProps {
14 group: GroupFragment;
15}
16
17const Details = ({ group }: DetailsProps) => {
18 const navigate = useNavigate();
19 const { currentAccount } = useAccountStore();
20 const [showLightBox, setShowLightBox] = useState<boolean>(false);
21
22 const handleShowLightBox = useCallback(() => {
23 setShowLightBox(true);
24 }, []);
25
26 const handleCloseLightBox = useCallback(() => {
27 setShowLightBox(false);
28 }, []);
29
30 return (
31 <div className="mb-4 space-y-3 px-5 md:px-0">
32 <div className="flex items-start justify-between">
33 <div className="-mt-24 sm:-mt-24 relative ml-5 size-32 sm:size-36">
34 <Image
35 alt={group.address}
36 className="size-32 cursor-pointer rounded-xl bg-gray-200 ring-3 ring-gray-50 sm:size-36 dark:bg-gray-700 dark:ring-black"
37 height={128}
38 onClick={handleShowLightBox}
39 src={getAvatar(group, TRANSFORMS.AVATAR_BIG)}
40 width={128}
41 />
42 <LightBox
43 images={[getAvatar(group, TRANSFORMS.EXPANDED_AVATAR)]}
44 onClose={handleCloseLightBox}
45 show={showLightBox}
46 />
47 </div>
48 {currentAccount?.address === group.owner ? (
49 <Button
50 onClick={() => navigate(`/g/${group.address}/settings`)}
51 outline
52 >
53 Edit Group
54 </Button>
55 ) : (
56 <JoinLeaveButton group={group} />
57 )}
58 </div>
59 <H3 className="truncate py-2">{group.metadata?.name}</H3>
60 {group.metadata?.description ? (
61 <div className="markup linkify mr-0 break-words sm:mr-10">
62 <Markup mentions={getMentions(group.metadata?.description)}>
63 {group.metadata?.description}
64 </Markup>
65 </div>
66 ) : null}
67 <MembersCount group={group} />
68 </div>
69 );
70};
71
72export default Details;