Book card interaction smooth 4

components/PublicGrid.tsx

@@ -446,7 +446,7 @@ function playFlipSound(ctx: AudioContext | null) {
 
 function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void }) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const flipRef = useRef<import('page-flip/dist/js/page-flip.module.js').PageFlip | null>(null);
+  const flipRef = useRef<import('page-flip').PageFlip | null>(null);
   const audioRef = useRef<AudioContext | null>(null);
   const [currentPage, setCurrentPage] = useState(0);
   const [pageCount, setPageCount] = useState(pages.length);
@@ -471,7 +471,7 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void })
     block.style.height = '100%';
     containerRef.current.appendChild(block);
 
-    import('page-flip/dist/js/page-flip.module.js').then(({ PageFlip }) => {
+    import('page-flip').then(({ PageFlip }) => {
       if (cancelled) return;
       const flip = new PageFlip(block, {
         width: 550,

next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   allowedDevOrigins: ['10.210.1.225'],
+  transpilePackages: ['page-flip'],
 };
 
 export default nextConfig;

types/page-flip.d.ts

@@ -43,6 +43,3 @@ declare module 'page-flip' {
   }
 }
 
-declare module 'page-flip/dist/js/page-flip.module.js' {
-  export * from 'page-flip';
-}