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'
     >

src/pages/editor/Editor.tsx

@@ -104,7 +104,11 @@ const Editor: FC = () => {
                     </div>
                 </div>
             ) : null}
-            <LayersPanel isOpen={isLayersPanelOpen} setIsOpen={setIsLayersPanelOpen} />
+            <LayersPanel
+                isOpen={isLayersPanelOpen}
+                setIsOpen={setIsLayersPanelOpen}
+                catalogSize={data?.data?.size}
+            />
             <EditorCanvas catalogSize={data?.data?.size} />
             <EditorSidebar catalogSize={data?.data?.size} />
         </div>

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,6 +52,7 @@ const PagesPanel = () => {
                     isSelected && ' rounded-lg p-0.5'
                   )}
                 >
+                  {isEmpty ? (
                     <div
                       className={clx(
                         'w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center',
@@ -54,6 +61,13 @@ const PagesPanel = () => {
                     >
                       <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>

src/pages/home/Home.tsx

@@ -9,20 +9,29 @@ import { useCreateCatalog } from './hooks/useHomeData'
 import { useNavigate } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import DirectLogin from '../auth/components/DirectLogin'
-import { extractErrorMessage } from '@/helpers/utils'
+import { clx, extractErrorMessage } from '@/helpers/utils'
+
+const CATALOG_SIZES = [
+    { id: 'a4', label: 'A4' },
+    { id: 'a3', label: 'A3' },
+    { id: 'a5', label: 'A5' },
+] as const
 
 const Home: FC = () => {
 
     const navigate = useNavigate()
     const [active, setActive] = useState<string>('a4')
     const [name, setName] = useState<string>('')
+    const [slug, setSlug] = useState<string>('')
     const { mutate: createCatalog, isPending } = useCreateCatalog()
 
     const handleSubmit = () => {
         if (!name) {
             toast('نام کاتالوگ را وارد کنید', 'error')
+        } else if (!slug) {
+            toast('اسلاگ کاتالوگ را وارد کنید', 'error')
         } else {
-            createCatalog({ name: name, size: active, content: '' }, {
+            createCatalog({ name, slug, size: active, content: '' }, {
                 onSuccess: (data) => {
                     toast('کاتالوگ با موفقیت ساخته شد', 'success')
                     navigate(Paths.editor + `/${data?.data?.id}`)
@@ -36,75 +45,58 @@ const Home: FC = () => {
 
     return (
         <div className='mt-4 w-full'>
-            <div className='flex justify-between'>
-                <h1 className='text-lg font-light'>
+            <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+                <h1 className='text-base font-light sm:text-lg'>
                     ساخت  کاتالوگ ب ویرایشگر داناک
                 </h1>
                 <DirectLogin />
             </div>
 
-            <div className='mt-20 bg-white rounded-4xl p-10'>
-                <div className='text-center'>
+            <div className='mt-8 rounded-2xl bg-white p-4 sm:mt-12 sm:rounded-3xl sm:p-6 lg:mt-20 lg:rounded-4xl lg:p-10'>
+                <div className='mx-auto max-w-xl px-1 text-center text-sm leading-relaxed sm:text-base'>
                     سایز و نام مورد نظر را  انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید
                 </div>
 
                 <div>
-                    <div className='mt-8 flex justify-center gap-8'>
-                        <div onClick={() => setActive('a4')} className={`
-                            w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
-                            ${active === 'a4' && 'border-black!'}
-                            `}>
+                    <div className='mt-6 flex flex-wrap justify-center gap-4 sm:mt-8 sm:gap-6 lg:gap-8'>
+                        {CATALOG_SIZES.map(({ id, label }) => (
+                            <button
+                                key={id}
+                                type='button'
+                                onClick={() => setActive(id)}
+                                className={clx(
+                                    'flex w-full h-[126px] sm:w-[120px] cursor-pointer items-center justify-center rounded-[20px] border border-border sm:h-[146px] sm:w-[140px] lg:h-[166px] lg:w-[160px]',
+                                    active === id && 'border-black!',
+                                )}
+                            >
                                 <div>
-                                <div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
+                                    <div className='flex size-[72px] items-center justify-center rounded bg-[#EEF0F7] sm:size-[84px] lg:size-[94px]'>
                                         <DocumentText size={24} color='black' />
                                     </div>
-
                                     <div className='mt-3 text-center text-sm'>
-                                    A4
+                                        {label}
                                     </div>
                                 </div>
-                        </div>
-                        <div onClick={() => setActive('a3')} className={`
-                            w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
-                            ${active === 'a3' && 'border-black!'}
-                            `}>
-                            <div>
-                                <div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
-                                    <DocumentText size={24} color='black' />
+                            </button>
+                        ))}
                     </div>
 
-                                <div className='mt-3 text-center text-sm'>
-                                    A3
-                                </div>
-                            </div>
-                        </div>
-                        <div onClick={() => setActive('a5')} className={`
-                            w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
-                            ${active === 'a5' && 'border-black!'}
-                            `}>
-                            <div>
-                                <div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
-                                    <DocumentText size={24} color='black' />
-                                </div>
-
-                                <div className='mt-3 text-center text-sm'>
-                                    A5
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='mt-5'>
+                    <div className='mx-auto mt-5 flex w-full max-w-md flex-col gap-4 px-1 sm:px-0'>
                         <Input
                             label='نام کاتالوگ'
                             value={name}
                             onChange={(e) => setName(e.target.value)}
                         />
+                        <Input
+                            label='اسلاگ'
+                            value={slug}
+                            onChange={(e) => setSlug(e.target.value)}
+                        />
                     </div>
 
                     <div className='flex justify-center'>
-                        <Button disabled={isPending} onClick={handleSubmit} className='mt-8 rounded-xl'>
-                            <div className='flex gap-2 items-center'>
+                        <Button disabled={isPending} onClick={handleSubmit} className='mt-6 w-full max-w-md rounded-xl sm:mt-8 sm:w-auto'>
+                            <div className='flex items-center justify-center gap-2'>
                                 ادامه
                                 <ArrowLeft size={16} color='white' />
                             </div>
@@ -112,16 +104,16 @@ const Home: FC = () => {
                     </div>
                 </div>
 
-                <Divider label='یا' className='mt-10' />
+                <Divider label='یا' className='mt-8 sm:mt-10' />
 
-                <div className='mt-20 flex justify-center'>
-                    <div className='w-[183px] h-[193px] rounded-[18px] border flex flex-col items-center justify-center'>
-                        <img src={PdfIcon} alt='upload' className='w-12' />
-                        <div className='text-sm mt-3'>
+                <div className='mt-12 flex justify-center sm:mt-16 lg:mt-20'>
+                    <div className='flex h-[160px] w-[150px] flex-col items-center justify-center rounded-[18px] border sm:h-[193px] sm:w-[183px]'>
+                        <img src={PdfIcon} alt='upload' className='w-10 sm:w-12' />
+                        <div className='mt-3 text-sm'>
                             آپلود PDF
                         </div>
 
-                        <div className='h-5 px-5 rounded-full flex items-center bg-[#D4EDDE] text-[#01973D] text-[10px] mt-3'>
+                        <div className='mt-3 flex h-5 items-center rounded-full bg-[#D4EDDE] px-5 text-[10px] text-[#01973D]'>
                             رایگان
                         </div>
                     </div>

src/pages/home/types/Types.ts

@@ -1,5 +1,6 @@
 export type CreateCatalogParamsType = {
   name: string;
+  slug: string;
   size: string;
   content?: string;
   id?: string;