Create all components

src/pages/editor/components/EditorSidebar.tsx

@@ -15,30 +15,6 @@ const EditorSidebar = () => {
         setTool(selectedTool);
     };
 
-    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        const reader = new FileReader();
-        reader.onload = (event) => {
-            const imageUrl = event.target?.result as string;
-            const img = new Image();
-            img.onload = () => {
-                const newImage = {
-                    id: `image-${Date.now()}`,
-                    type: "image" as ToolType,
-                    x: 100,
-                    y: 100,
-                    width: img.width,
-                    height: img.height,
-                    imageUrl,
-                };
-                useEditorStore.getState().addObject(newImage);
-            };
-            img.src = imageUrl;
-        };
-        reader.readAsDataURL(file);
-    };
 
     return (
         <>
@@ -72,7 +48,7 @@ const EditorSidebar = () => {
                                 onDelete={deleteObject}
                             />
                         ) : (
-                            <ToolInstructions tool={tool} onImageUpload={handleImageUpload} />
+                            <ToolInstructions tool={tool} />
                         )}
                     </div>
                 </div>

src/pages/editor/components/sidebar/ObjectSettings.tsx

@@ -8,6 +8,7 @@ import {
     LinkSettings,
     VideoSettings,
     TransformSettings,
+    GridSettings,
 } from "./settings";
 
 type ObjectSettingsProps = {
@@ -60,6 +61,10 @@ const ObjectSettings = ({ selectedObject, onUpdate, onDelete }: ObjectSettingsPr
                 />
             )}
 
+            {selectedObject.type === "grid" && (
+                <GridSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            )}
+
             <TransformSettings selectedObject={selectedObject} onUpdate={onUpdate} />
         </div>
     );

src/pages/editor/components/sidebar/ToolInstructions.tsx

@@ -1,14 +1,53 @@
-import type { ToolType } from "../../store/editorStore";
-import { ImageUpload, DocumentUpload, VideoInput, LinkInput, SimpleInstruction } from "./instructions";
+import { useEditorStore, type ToolType } from "../../store/editorStore";
+import {
+    ImageUpload,
+    DocumentUpload,
+    VideoInput,
+    LinkInput,
+    SelectInstruction,
+    RectangleInstruction,
+    CircleInstruction,
+    TextInstruction,
+    LineInstruction,
+    ArrowInstruction,
+    StickerInstruction,
+    GridInstruction,
+} from "./instructions";
 
 type ToolInstructionsProps = {
     tool: ToolType;
-    onImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-const ToolInstructions = ({ tool, onImageUpload }: ToolInstructionsProps) => {
+const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
+    const { addObject } = useEditorStore();
+
+    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const imageUrl = event.target?.result as string;
+                const img = new Image();
+                img.onload = () => {
+                    const newImage = {
+                        id: `image-${Date.now()}`,
+                        type: "image" as ToolType,
+                        x: 100,
+                        y: 100,
+                        width: img.width,
+                        height: img.height,
+                        imageUrl,
+                    };
+                    addObject(newImage);
+                };
+                img.src = imageUrl;
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
     if (tool === "image") {
-        return <ImageUpload onImageUpload={onImageUpload} />;
+        return <ImageUpload onImageUpload={handleImageUpload} />;
     }
 
     if (tool === "document") {
@@ -23,7 +62,18 @@ const ToolInstructions = ({ tool, onImageUpload }: ToolInstructionsProps) => {
         return <LinkInput />;
     }
 
-    return <SimpleInstruction tool={tool} />;
+    const simpleInstructions: Partial<Record<ToolType, React.ReactElement>> = {
+        select: <SelectInstruction />,
+        rectangle: <RectangleInstruction />,
+        circle: <CircleInstruction />,
+        text: <TextInstruction />,
+        line: <LineInstruction />,
+        arrow: <ArrowInstruction />,
+        sticker: <StickerInstruction />,
+        grid: <GridInstruction />,
+    };
+
+    return simpleInstructions[tool] ?? null;
 };
 
 export default ToolInstructions;

src/pages/editor/components/sidebar/instructions/ArrowInstruction.tsx

@@ -0,0 +1,9 @@
+const ArrowInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای رسم پیکان، روی کانوس کلیک کرده و بکشید</p>
+    </div>
+);
+
+export default ArrowInstruction;
+
+

src/pages/editor/components/sidebar/instructions/CircleInstruction.tsx

@@ -0,0 +1,9 @@
+const CircleInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای رسم دایره، روی کانوس کلیک کرده و بکشید</p>
+    </div>
+);
+
+export default CircleInstruction;
+
+

src/pages/editor/components/sidebar/instructions/GridInstruction.tsx

@@ -0,0 +1,9 @@
+const GridInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای افزودن گرید، روی کانوس کلیک کنید</p>
+    </div>
+);
+
+export default GridInstruction;
+
+

src/pages/editor/components/sidebar/instructions/LineInstruction.tsx

@@ -0,0 +1,9 @@
+const LineInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای رسم خط، روی کانوس کلیک کرده و بکشید</p>
+    </div>
+);
+
+export default LineInstruction;
+
+

src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx

@@ -0,0 +1,9 @@
+const RectangleInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای رسم مستطیل، روی کانوس کلیک کرده و بکشید</p>
+    </div>
+);
+
+export default RectangleInstruction;
+
+

src/pages/editor/components/sidebar/instructions/SelectInstruction.tsx

@@ -0,0 +1,9 @@
+const SelectInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای انتخاب و جابجایی اشیاء، روی آن‌ها کلیک کنید</p>
+    </div>
+);
+
+export default SelectInstruction;
+
+

src/pages/editor/components/sidebar/instructions/SimpleInstruction.tsx

@@ -1,31 +0,0 @@
-import type { ToolType } from "../../../store/editorStore";
-
-type SimpleInstructionProps = {
-    tool: ToolType;
-};
-
-const SimpleInstruction = ({ tool }: SimpleInstructionProps) => {
-    const instructions: Record<ToolType, string> = {
-        select: "برای انتخاب و جابجایی اشیاء، روی آن‌ها کلیک کنید",
-        rectangle: "برای رسم مستطیل، روی کانوس کلیک کرده و بکشید",
-        circle: "برای رسم دایره، روی کانوس کلیک کرده و بکشید",
-        text: "برای افزودن متن، روی کانوس کلیک کنید",
-        line: "برای رسم خط، روی کانوس کلیک کرده و بکشید",
-        arrow: "برای رسم پیکان، روی کانوس کلیک کرده و بکشید",
-        sticker: "برای افزودن استیکر، روی کانوس کلیک کنید",
-        grid: "برای افزودن گرید، روی کانوس کلیک کنید",
-        image: "",
-        document: "",
-        video: "",
-        link: "",
-    };
-
-    return (
-        <div className="text-sm text-gray-600">
-            <p>{instructions[tool]}</p>
-        </div>
-    );
-};
-
-export default SimpleInstruction;
-

src/pages/editor/components/sidebar/instructions/StickerInstruction.tsx

@@ -0,0 +1,9 @@
+const StickerInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای افزودن استیکر، روی کانوس کلیک کنید</p>
+    </div>
+);
+
+export default StickerInstruction;
+
+

src/pages/editor/components/sidebar/instructions/TextInstruction.tsx

@@ -0,0 +1,9 @@
+const TextInstruction = () => (
+    <div className="text-sm text-gray-600">
+        <p>برای افزودن متن، روی کانوس کلیک کنید</p>
+    </div>
+);
+
+export default TextInstruction;
+
+

src/pages/editor/components/sidebar/instructions/index.ts

@@ -2,5 +2,12 @@ export { default as ImageUpload } from "./ImageUpload";
 export { default as DocumentUpload } from "./DocumentUpload";
 export { default as VideoInput } from "./VideoInput";
 export { default as LinkInput } from "./LinkInput";
-export { default as SimpleInstruction } from "./SimpleInstruction";
+export { default as SelectInstruction } from "./SelectInstruction";
+export { default as RectangleInstruction } from "./RectangleInstruction";
+export { default as CircleInstruction } from "./CircleInstruction";
+export { default as TextInstruction } from "./TextInstruction";
+export { default as LineInstruction } from "./LineInstruction";
+export { default as ArrowInstruction } from "./ArrowInstruction";
+export { default as StickerInstruction } from "./StickerInstruction";
+export { default as GridInstruction } from "./GridInstruction";
 

src/pages/editor/components/sidebar/settings/GridSettings.tsx

@@ -0,0 +1,37 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type GridSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const GridSettings = ({ selectedObject, onUpdate }: GridSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="عرض"
+                type="number"
+                value={selectedObject.width || 200}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        width: parseInt(e.target.value) || 200,
+                    })
+                }
+            />
+            <Input
+                label="ارتفاع"
+                type="number"
+                value={selectedObject.height || 200}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        height: parseInt(e.target.value) || 200,
+                    })
+                }
+            />
+        </>
+    );
+};
+
+export default GridSettings;
+

src/pages/editor/components/sidebar/settings/index.ts

@@ -5,4 +5,5 @@ export { default as SizeSettings } from "./SizeSettings";
 export { default as LinkSettings } from "./LinkSettings";
 export { default as VideoSettings } from "./VideoSettings";
 export { default as TransformSettings } from "./TransformSettings";
+export { default as GridSettings } from "./GridSettings";
 

src/pages/editor/components/tools/types.ts

@@ -1,5 +1,5 @@
 import Konva from "konva";
-import { EditorObject } from "../../store/editorStore";
+import type { EditorObject } from "../../store/editorStore";
 
 export type ShapeProps = {
   obj: EditorObject;