"use client" import { useEffect, useRef } from "react" import { allLayoutAspectRatios, allLayouts } from "@/app/layouts" import { useStore } from "@/app/store" import { cn } from "@/lib/utils" export function Page({ page }: { page: number }) { const zoomLevel = useStore(s => s.zoomLevel) const layouts = useStore(s => s.layouts) // attention: here we use a fallback to layouts[0] // if no predetermined layout exists for this page number const layout = layouts[page] || layouts[0] const LayoutElement = (allLayouts as any)[layout] const aspectRatio = ((allLayoutAspectRatios as any)[layout] as string) || "aspect-[250/297]" const currentNbPages = useStore(s => s.currentNbPages) const maxNbPages = useStore(s => s.maxNbPages) const currentNbPanelsPerPage = useStore(s => s.currentNbPanelsPerPage) // in the future, different layouts might have different numbers of panels const allLayoutsNbPanels = { Layout0: currentNbPanelsPerPage, Layout1: currentNbPanelsPerPage, Layout2: currentNbPanelsPerPage, Layout3: currentNbPanelsPerPage, // Layout4: currentNbPanelsPerPage } // it's a bit confusing and too rigid we can't change the layouts for each panel, // I should refactor this const panelsPerPage = ((allLayoutsNbPanels as any)[layout] as number) || currentNbPanelsPerPage // I think we should deprecate this part // this was used to keep track of the page HTML element, // for use with a HTML-to-bitmap library // but the CSS layout wasn't followed properly and it depended on the zoom level // // update: in the future if we want a good html to image convertion /* const setPage = useStore(s => s.setPage) const pageRef = useRef(null) useEffect(() => { const element = pageRef.current if (!element) { return } setPage(element) }, [pageRef.current]) */ return (
100 ? `100`}` }} >
100 ? `100`}` }} >
{currentNbPages > 1 &&

{page + 1}/{maxNbPages} {/* alternative styles: Page {page + 1} Page {page + 1} / {maxNbPages} {page + 1} / {maxNbPages} */}

}
) }