leaflet.pub
a tool for shared writing and social publishing
awarm.space
1import { useFootnoteContext } from "./FootnoteContext";
2import { FootnoteEditor } from "./FootnoteEditor";
3import { useReplicache } from "src/replicache";
4import { useEntitySetContext } from "components/EntitySetProvider";
5import { deleteFootnoteFromBlock } from "./deleteFootnoteFromBlock";
6import { FootnoteSectionLayout } from "./FootnoteItemLayout";
7
8export function FootnoteSection(props: { hiddenOnDesktop?: boolean }) {
9 let { footnotes } = useFootnoteContext();
10 let { permissions } = useEntitySetContext();
11 let rep = useReplicache();
12
13 if (footnotes.length === 0) return null;
14
15 return (
16 <FootnoteSectionLayout className={props.hiddenOnDesktop ? "lg:hidden" : ""}>
17 {footnotes.map((fn) => (
18 <FootnoteEditor
19 key={fn.footnoteEntityID}
20 footnoteEntityID={fn.footnoteEntityID}
21 index={fn.index}
22 editable={permissions.write}
23 onDelete={
24 permissions.write
25 ? () => {
26 deleteFootnoteFromBlock(
27 fn.footnoteEntityID,
28 fn.blockID,
29 rep.rep,
30 );
31 }
32 : undefined
33 }
34 />
35 ))}
36 </FootnoteSectionLayout>
37 );
38}