a tool for shared writing and social publishing
leaflet.pub
1import { AtUri } from "@atproto/api";
2import { atUriToUrl } from "src/utils/mentionUtils";
3import {
4 isDocumentCollection,
5 isPublicationCollection,
6} from "src/utils/collectionHelpers";
7
8/**
9 * Component for rendering at-uri mentions (publications and documents) as clickable links.
10 * NOTE: This component's styling and behavior should match the ProseMirror schema rendering
11 * in components/Blocks/TextBlock/schema.ts (atMention mark). If you update one, update the other.
12 */
13export function AtMentionLink({
14 atURI,
15 children,
16 className = "",
17}: {
18 atURI: string;
19 children: React.ReactNode;
20 className?: string;
21}) {
22 const aturi = new AtUri(atURI);
23 const isPublication = isPublicationCollection(aturi.collection);
24 const isDocument = isDocumentCollection(aturi.collection);
25
26 // Show publication icon if available
27 const icon =
28 isPublication || isDocument ? (
29 <img
30 src={`/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`}
31 className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top"
32 alt=""
33 width="20"
34 height="20"
35 loading="lazy"
36 />
37 ) : null;
38
39 return (
40 <a
41 href={atUriToUrl(atURI)}
42 target="_blank"
43 rel="noopener noreferrer"
44 className={`mention ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`}
45 >
46 {icon}
47 {children}
48 </a>
49 );
50}