preview page in pages sections

src/pages/editor/components/PagesPanel.tsx

@@ -1,8 +1,13 @@
-import { DocumentText, Copy, Trash, AddSquare } from 'iconsax-react'
+import { Copy, Trash, AddSquare, DocumentText } from 'iconsax-react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
+import CatalogPreview from '@/pages/catalogue/components/CatalogPreview'
 
-const PagesPanel = () => {
+type PagesPanelProps = {
+  catalogSize?: string
+}
+
+const PagesPanel = ({ catalogSize }: PagesPanelProps) => {
   const {
     pages,
     currentPageId,
@@ -37,6 +42,7 @@ const PagesPanel = () => {
           ) : (
             pages.map((page) => {
               const isSelected = currentPageId === page.id
+              const isEmpty = page.objects.length === 0
               return (
                 <div
                   key={page.id}
@@ -46,14 +52,22 @@ const PagesPanel = () => {
                     isSelected && ' rounded-lg p-0.5'
                   )}
                 >
-                  <div
-                    className={clx(
-                      'w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center',
-                      isSelected && 'border border-black'
-                    )}
-                  >
-                    <DocumentText size={20} color="#000" variant="Outline" />
-                  </div>
+                  {isEmpty ? (
+                    <div
+                      className={clx(
+                        'w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center',
+                        isSelected && 'border border-black'
+                      )}
+                    >
+                      <DocumentText size={20} color="#000" variant="Outline" />
+                    </div>
+                  ) : (
+                    <CatalogPreview
+                      page={page}
+                      size={catalogSize}
+                      selected={isSelected}
+                    />
+                  )}
                   <div className="text-xs font-medium text-center text-black">
                     {page.name}
                   </div>