split components layers and pages

2025-12-31 14:23:40 +03:30
parent bb55b730a2
commit 1ba62b0cee
3 changed files with 205 additions and 176 deletions
@@ -0,0 +1,99 @@
+import { DocumentText, Copy, Trash, AddSquare } from 'iconsax-react'
+import { useEditorStore } from '../store/editorStore'
+import { clx } from '@/helpers/utils'
+
+const PagesPanel = () => {
+  const {
+    pages,
+    currentPageId,
+    setCurrentPage,
+    addPage,
+    duplicatePage,
+    deletePage,
+  } = useEditorStore()
+
+  const handleAddPage = () => {
+    addPage()
+  }
+
+  const handleDuplicatePage = (pageId: string) => {
+    duplicatePage(pageId)
+  }
+
+  const handleDeletePage = (pageId: string) => {
+    if (pages.length > 1) {
+      deletePage(pageId)
+    }
+  }
+
+  return (
+    <>
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex flex-col gap-3 items-center">
+          {pages.length === 0 ? (
+            <div className="text-sm text-gray-500 text-center py-8">
+              صفحه‌ای وجود ندارد
+            </div>
+          ) : (
+            pages.map((page) => {
+              const isSelected = currentPageId === page.id
+              return (
+                <div
+                  key={page.id}
+                  onClick={() => setCurrentPage(page.id)}
+                  className={clx(
+                    'flex flex-col gap-2 cursor-pointer transition-colors',
+                    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>
+                  <div className="text-xs font-medium text-center text-black">
+                    {page.name}
+                  </div>
+                </div>
+              )
+            })
+          )}
+        </div>
+      </div>
+
+      <div className="p-4 border-t border-border rounded-b-[32px]">
+        <div className="flex items-center justify-center gap-3">
+          <button
+            onClick={handleAddPage}
+            className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors "
+          >
+            <AddSquare size={20} color="black" />
+          </button>
+          {currentPageId && (
+            <>
+              <button
+                onClick={() => handleDuplicatePage(currentPageId)}
+                className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors "
+              >
+                <Copy size={20} color="black" />
+              </button>
+              <button
+                onClick={() => handleDeletePage(currentPageId)}
+                disabled={pages.length <= 1}
+                className="w-10 h-10 flex items-center hover:bg-gray-100 justify-center rounded-lg  transition-colors  disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Trash size={20} color="#FF3B30" />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default PagesPanel
+