preview page in pages sections

src/pages/editor/components/LayersPanel.tsx

@@ -10,6 +10,7 @@ type TabType = 'pages' | 'layers' | 'settings'
 type LayersPanelProps = {
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
+  catalogSize?: string
 }
 
 const TAB_LABELS: Record<TabType, string> = {
@@ -18,7 +19,7 @@ const TAB_LABELS: Record<TabType, string> = {
   settings: 'تنظیمات',
 }
 
-const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
+const LayersPanel = ({ isOpen, setIsOpen, catalogSize }: LayersPanelProps) => {
   const [activeTab, setActiveTab] = useState<TabType>('pages')
 
   if (!isOpen) {
@@ -98,7 +99,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
             </div>
           </div>
 
-          {activeTab === 'pages' && <PagesPanel />}
+          {activeTab === 'pages' && <PagesPanel catalogSize={catalogSize} />}
           {activeTab === 'layers' && <LayersList />}
           {activeTab === 'settings' && <SettingsPanel />}
         </div>

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>