leaflet.pub
a tool for shared writing and social publishing
awarm.space
1import { ReactNode } from "react";
2
3export function FootnoteItemLayout(props: {
4 index: number;
5 indexAction?: () => void;
6 indexHref?: string;
7 children: ReactNode;
8 trailing?: ReactNode;
9 id?: string;
10 className?: string;
11}) {
12 let indexClassName =
13 "text-tertiary font-medium shrink-0 text-sm leading-normal no-underline hover:underline cursor-pointer";
14
15 let indexContent = <>{props.index}.</>;
16
17 return (
18 <div
19 id={props.id}
20 className={`footnote-item flex items-start gap-2 text-sm group/footnote ${props.className ?? ""}`}
21 >
22 {props.indexHref ? (
23 <a href={props.indexHref} className={indexClassName}>
24 {indexContent}
25 </a>
26 ) : (
27 <button
28 className={indexClassName}
29 onClick={props.indexAction}
30 title="Jump to footnote in text"
31 >
32 {indexContent}
33 </button>
34 )}
35 <div
36 className="grow min-w-0 text-secondary [&_.ProseMirror]:outline-hidden"
37 style={{ wordBreak: "break-word" }}
38 >
39 {props.children}
40 </div>
41 {props.trailing}
42 </div>
43 );
44}
45
46export function FootnoteSectionLayout(props: {
47 children: ReactNode;
48 className?: string;
49}) {
50 return (
51 <div
52 className={`footnote-section px-3 sm:px-4 pb-2 ${props.className ?? ""}`}
53 >
54 <hr className="border-border-light mb-3" />
55 <div className="flex flex-col gap-2">{props.children}</div>
56 </div>
57 );
58}