preview page in pages sections

src/pages/catalogue/components/CatalogPreview.tsx

@@ -4,6 +4,8 @@ import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer
 import { getPaperDimensions } from '@/config/paperSizes'
 import type { CatalogItemType } from '../types/Types'
 import type { PageData } from '@/pages/viewer/types'
+import type { Page } from '@/pages/editor/store/editorStore.types'
+import { clx } from '@/helpers/utils'
 
 const PREVIEW_WIDTH = 64
 const PREVIEW_HEIGHT = 89
@@ -20,30 +22,57 @@ function getFirstPageFromContent(content: string | undefined): PageData | null {
   }
 }
 
-type Props = {
-  item: CatalogItemType
+function getPageDataFromEditorPage(page: Page): PageData | null {
+  const transformed = transformViewerDataToPages({
+    pages: [
+      {
+        id: page.id,
+        name: page.name,
+        backgroundType: page.backgroundType,
+        backgroundColor: page.backgroundColor,
+        backgroundGradient: page.backgroundGradient,
+        backgroundImageUrl: page.backgroundImageUrl,
+        objects: page.objects,
+      },
+    ],
+  })
+  return transformed[0] ?? null
 }
 
-const CatalogPreview: FC<Props> = ({ item }) => {
-  const firstPage = useMemo(
-    () => getFirstPageFromContent(item.content),
-    [item.content]
-  )
+type Props = {
+  item?: CatalogItemType
+  page?: Page
+  size?: string
+  className?: string
+  selected?: boolean
+}
+
+const CatalogPreview: FC<Props> = ({ item, page, size, className, selected }) => {
+  const catalogSize = item?.size ?? size ?? 'a4'
+
+  const firstPage = useMemo(() => {
+    if (page) return getPageDataFromEditorPage(page)
+    return getFirstPageFromContent(item?.content)
+  }, [item?.content, page])
 
   const { pageWidth, pageHeight, previewScale } = useMemo(() => {
-    const { width, height } = getPaperDimensions(item.size ?? 'a4')
+    const { width, height } = getPaperDimensions(catalogSize)
     const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height)
     return {
       pageWidth: width,
       pageHeight: height,
       previewScale: scale,
     }
-  }, [item.size])
+  }, [catalogSize])
 
   if (!firstPage) {
     return (
       <div
-        className='bg-gray-200 rounded-lg flex items-center justify-center shrink-0'
+        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 }}
       >
         <span className='text-[10px] text-gray-400'>بدون پیش‌نمایش</span>
@@ -53,7 +82,11 @@ const CatalogPreview: FC<Props> = ({ item }) => {
 
   return (
     <div
-      className='rounded-lg overflow-hidden shrink-0 bg-white border border-gray-200 relative'
+      className={clx(
+        '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'
     >