yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import type { MarkupLinkProps } from "@hey/types/misc";
2import { Link } from "react-router";
3import AccountPreview from "@/components/Shared/Account/AccountPreview";
4import Slug from "@/components/Shared/Slug";
5import stopEventPropagation from "@/helpers/stopEventPropagation";
6
7const Mention = ({ mentions, title }: MarkupLinkProps) => {
8 const username = title;
9
10 if (!username) {
11 return null;
12 }
13
14 const fullUsernames = mentions?.map((mention) => mention.replace.from);
15
16 if (!fullUsernames?.includes(username)) {
17 return title;
18 }
19
20 const canShowUserPreview = (username: string) => {
21 const foundMention = mentions?.find(
22 (mention) => mention.replace.from === username
23 );
24
25 return Boolean(foundMention?.replace);
26 };
27
28 const getNameFromMention = (username: string): string => {
29 const foundMention = mentions?.find(
30 (mention) => mention.replace.from === username
31 );
32
33 return foundMention?.replace.from.split("/")[1] || "";
34 };
35
36 const getAddressFromMention = (username: string): string => {
37 const foundMention = mentions?.find(
38 (mention) => mention.replace.from === username
39 );
40
41 return foundMention?.__typename === "AccountMention"
42 ? foundMention.account
43 : "";
44 };
45
46 if (canShowUserPreview(username)) {
47 return (
48 <Link
49 className="outline-hidden focus:underline"
50 onClick={stopEventPropagation}
51 to={`/u/${getNameFromMention(username)}`}
52 >
53 <AccountPreview
54 address={getAddressFromMention(username)}
55 username={getNameFromMention(username)}
56 >
57 <Slug prefix="@" slug={getNameFromMention(username)} useBrandColor />
58 </AccountPreview>
59 </Link>
60 );
61 }
62
63 return <Slug prefix="@" slug={getNameFromMention(username)} useBrandColor />;
64};
65
66export default Mention;