Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.2 kB · 67 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768export const LeafletLayout = (props: { children: React.ReactNode; className?: string;}) => { return ( <div className={` leafetLayout w-full relative mx-auto pwa-padding flex items-stretch h-full grow`} id="page-carousel" > {/* 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 */} <div id="pages" className={`pagesWrapper w-full flex gap-0 py-2 sm:py-6 no-scrollbar h-full overflow-y-hidden overflow-x-scroll snap-x snap-mandatory ${props.className}`} > {props.children} </div> </div> );};
export const BookendSpacer = (props: { onClick?: (e: React.MouseEvent) => void; children?: React.ReactNode; // A lone page wider than --page-width-units (a canvas) plus two fixed // spacers overflows the carousel, which then scrolls and snaps back on // every sideways gesture. Shrinking spacers keep it exactly full. shrink?: boolean;}) => { // 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. // --leaflet-layout-width lets a host that isn't the full viewport (the reader's post viewer) center against its own box. return ( <div className={`spacer flex justify-end items-start ${props.shrink ? "shrink min-w-0" : "shrink-0"}`} style={{ width: `calc((var(--leaflet-layout-width, 100vw) - var(--page-width-units)) / 2)`, }} onClick={props.onClick ? props.onClick : () => {}} > {props.children} </div> );};
export const SandwichSpacer = (props: { onClick?: (e: React.MouseEvent) => void; noWidth?: boolean; className?: string;}) => { // these spacers are used between pages so that the page carousel can fit two pages side by side by snapping in between pages return ( <div onClick={props.onClick} className={`spacer shrink-0 lg:snap-center ${props.noWidth ? "w-0" : "w-6"} ${props.className}`} /> );};