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