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,102 @@
+import { Text, Shapes, Eye, Copy, Trash } from 'iconsax-react'
+import { useEditorStore } from '../store/editorStore'
+import { clx } from '@/helpers/utils'
+
+const LayersList = () => {
+  const {
+    objects,
+    selectedObjectId,
+    setSelectedObjectId,
+    deleteObject,
+    duplicateObject,
+  } = useEditorStore()
+
+  const getLayerIcon = (type: string) => {
+    switch (type) {
+      case 'text':
+        return <Text size={20} color="black" />
+      case 'rectangle':
+      case 'image':
+      case 'grid':
+        return <Shapes size={20} color="black" />
+      default:
+        return <Shapes size={20} color="black" />
+    }
+  }
+
+  const getLayerLabel = (type: string) => {
+    switch (type) {
+      case 'text':
+        return 'متن'
+      case 'rectangle':
+      case 'image':
+      case 'grid':
+        return 'اشکال هندسی'
+      default:
+        return 'لایه'
+    }
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto p-4">
+      <div className="flex flex-col gap-2">
+        {objects.length === 0 ? (
+          <div className="text-sm text-gray-500 text-center py-8">
+            لایه‌ای وجود ندارد
+          </div>
+        ) : (
+          objects.map((obj) => {
+            const isSelected = selectedObjectId === obj.id
+            return (
+              <div
+                key={obj.id}
+                onClick={() => setSelectedObjectId(obj.id)}
+                className={clx(
+                  'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
+                  isSelected
+                    ? 'bg-blue-50 border border-blue-200'
+                    : 'bg-gray-50 hover:bg-gray-100'
+                )}
+              >
+                <div className="shrink-0">{getLayerIcon(obj.type)}</div>
+                <div className="flex-1 text-xs">{getLayerLabel(obj.type)}</div>
+                <div className="flex items-center gap-1.5">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      // TODO: Toggle visibility
+                    }}
+                    className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                  >
+                    <Eye size={16} color="black" />
+                  </button>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      duplicateObject(obj.id)
+                    }}
+                    className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                  >
+                    <Copy size={16} color="black" />
+                  </button>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      deleteObject(obj.id)
+                    }}
+                    className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-red-100 transition-colors"
+                  >
+                    <Trash size={16} color="#FF3B30" />
+                  </button>
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default LayersList
+