without preview text center

src/pages/catalogue/components/CatalogPreview.tsx

@@ -1,24 +1,24 @@
-import { type FC, useMemo } from 'react'
+import { getPaperDimensions } from "@/config/paperSizes";
-import BookPage from '@/pages/viewer/components/BookPage'
+import { clx } from "@/helpers/utils";
-import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer'
+import type { Page } from "@/pages/editor/store/editorStore.types";
-import { getPaperDimensions } from '@/config/paperSizes'
+import BookPage from "@/pages/viewer/components/BookPage";
-import type { CatalogItemType } from '../types/Types'
+import type { PageData } from "@/pages/viewer/types";
-import type { PageData } from '@/pages/viewer/types'
+import { transformViewerDataToPages } from "@/pages/viewer/utils/dataTransformer";
-import type { Page } from '@/pages/editor/store/editorStore.types'
+import { type FC, useMemo } from "react";
-import { clx } from '@/helpers/utils'
+import type { CatalogItemType } from "../types/Types";
 
-const PREVIEW_WIDTH = 64
+const PREVIEW_WIDTH = 64;
-const PREVIEW_HEIGHT = 89
+const PREVIEW_HEIGHT = 89;
 
 function getFirstPageFromContent(content: string | undefined): PageData | null {
-  if (!content) return null
+  if (!content) return null;
   try {
-    const parsed = JSON.parse(content)
+    const parsed = JSON.parse(content);
-    const pagesArray = Array.isArray(parsed) ? parsed : (parsed?.pages ?? [])
+    const pagesArray = Array.isArray(parsed) ? parsed : (parsed?.pages ?? []);
-    const transformed = transformViewerDataToPages({ pages: pagesArray })
+    const transformed = transformViewerDataToPages({ pages: pagesArray });
-    return transformed[0] ?? null
+    return transformed[0] ?? null;
   } catch {
-    return null
+    return null;
   }
 }
 
@@ -35,83 +35,65 @@ function getPageDataFromEditorPage(page: Page): PageData | null {
         objects: page.objects,
       },
     ],
-  })
+  });
-  return transformed[0] ?? null
+  return transformed[0] ?? null;
 }
 
 type Props = {
-  item?: CatalogItemType
+  item?: CatalogItemType;
-  page?: Page
+  page?: Page;
-  size?: string
+  size?: string;
-  className?: string
+  className?: string;
-  selected?: boolean
+  selected?: boolean;
-}
+};
 
 const CatalogPreview: FC<Props> = ({ item, page, size, className, selected }) => {
-  const catalogSize = item?.size ?? size ?? 'a4'
+  const catalogSize = item?.size ?? size ?? "a4";
 
   const firstPage = useMemo(() => {
-    if (page) return getPageDataFromEditorPage(page)
+    if (page) return getPageDataFromEditorPage(page);
-    return getFirstPageFromContent(item?.content)
+    return getFirstPageFromContent(item?.content);
-  }, [item?.content, page])
+  }, [item?.content, page]);
 
   const { pageWidth, pageHeight, previewScale } = useMemo(() => {
-    const { width, height } = getPaperDimensions(catalogSize)
+    const { width, height } = getPaperDimensions(catalogSize);
-    const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height)
+    const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height);
     return {
       pageWidth: width,
       pageHeight: height,
       previewScale: scale,
-    }
+    };
-  }, [catalogSize])
+  }, [catalogSize]);
 
   if (!firstPage) {
     return (
-      <div
+      <div className={clx("bg-gray-200 rounded-lg flex items-center justify-center shrink-0", selected && "border border-black", className)} style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}>
-        className={clx(
+        <span className="text-[10px] text-gray-400 text-center">بدون پیش‌نمایش</span>
-          'bg-gray-200 rounded-lg flex items-center justify-center shrink-0',
-          selected && 'border border-black',
-          className,
-        )}
-        style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
-      >
-        <span className='text-[10px] text-gray-400'>بدون پیش‌نمایش</span>
       </div>
-    )
+    );
   }
 
   return (
     <div
-      className={clx(
+      className={clx("rounded-lg overflow-hidden shrink-0 bg-white border border-gray-200 relative", selected && "border-black", className)}
-        'rounded-lg overflow-hidden shrink-0 bg-white border border-gray-200 relative',
-        selected && 'border-black',
-        className,
-      )}
       style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
-      dir='rtl'
+      dir="rtl"
     >
       <div
-        className='absolute'
+        className="absolute"
         style={{
           top: 0,
           right: 0,
           transform: `scale(${previewScale})`,
-          transformOrigin: 'top right',
+          transformOrigin: "top right",
           width: pageWidth,
           height: pageHeight,
         }}
       >
-        <BookPage
+        <BookPage page={firstPage} scale={1} pageWidth={pageWidth} pageHeight={pageHeight} disableEntranceAnimations showPaperShadow={false} />
-          page={firstPage}
-          scale={1}
-          pageWidth={pageWidth}
-          pageHeight={pageHeight}
-          disableEntranceAnimations
-          showPaperShadow={false}
-        />
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default CatalogPreview
+export default CatalogPreview;