a tool for shared writing and social publishing
leaflet.pub
1export const LeafletLayout = (props: {
2 children: React.ReactNode;
3 className?: string;
4}) => {
5 return (
6 <div
7 className={`
8 leafetLayout
9 w-full h-full relative
10 mx-auto pwa-padding
11 flex items-stretch grow`}
12 id="page-carousel"
13 >
14 {/* if you adjust this padding, remember to adjust the negative margins on page in components/Pages/Page.tsx in pageScrollWrapper when card borders are hidden */}
15 <div
16 id="pages"
17 className={`pagesWrapper
18 w-full h-full
19 flex gap-0
20 py-2 sm:py-6
21 overflow-y-hidden overflow-x-scroll snap-x snap-mandatory no-scrollbar
22 ${props.className}`}
23 >
24 {props.children}
25 </div>
26 </div>
27 );
28};
29
30export const BookendSpacer = (props: {
31 onClick?: (e: React.MouseEvent) => void;
32 children?: React.ReactNode;
33}) => {
34 // these spacers go at the end of the first and last pages so that those pages can be scrolled to the center of the screen
35 return (
36 <div
37 className="spacer shrink-0 flex justify-end items-start"
38 style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }}
39 onClick={props.onClick ? props.onClick : () => {}}
40 >
41 {props.children}
42 </div>
43 );
44};
45
46export const SandwichSpacer = (props: {
47 onClick?: (e: React.MouseEvent) => void;
48 noWidth?: boolean;
49 className?: string;
50}) => {
51 // these spacers are used between pages so that the page carousel can fit two pages side by side by snapping in between pages
52 return (
53 <div
54 onClick={props.onClick}
55 className={`spacer shrink-0 lg:snap-center ${props.noWidth ? "w-0" : "w-6"} ${props.className}`}
56 />
57 );
58};