add konva js to project + create some components with ai

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

@@ -0,0 +1,51 @@
+import { DocumentUpload } from "iconsax-react";
+import { useEditorStore, type ToolType } from "../../../store/editorStore";
+import Button from "@/components/Button";
+
+const DocumentUploadComponent = () => {
+    return (
+        <div className="space-y-4">
+            <div>
+                <label className="block text-sm mb-2">آپلود سند</label>
+                <input
+                    type="file"
+                    accept=".pdf,.doc,.docx"
+                    onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        if (file) {
+                            const reader = new FileReader();
+                            reader.onload = (event) => {
+                                const fileUrl = event.target?.result as string;
+                                const newDocument = {
+                                    id: `document-${Date.now()}`,
+                                    type: "document" as ToolType,
+                                    x: 100,
+                                    y: 100,
+                                    width: 200,
+                                    height: 250,
+                                    imageUrl: fileUrl,
+                                };
+                                const { addObject } = useEditorStore.getState();
+                                addObject(newDocument);
+                            };
+                            reader.readAsDataURL(file);
+                        }
+                    }}
+                    className="hidden"
+                    id="document-upload"
+                />
+                <Button
+                    variant="outline"
+                    onClick={() => document.getElementById("document-upload")?.click()}
+                    className="w-full"
+                >
+                    <DocumentUpload size={20} />
+                    انتخاب سند
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default DocumentUploadComponent;
+

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

@@ -0,0 +1,32 @@
+import { Gallery } from "iconsax-react";
+import Button from "@/components/Button";
+
+type ImageUploadProps = {
+    onImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const ImageUpload = ({ onImageUpload }: ImageUploadProps) => {
+    return (
+        <div>
+            <label className="block text-sm mb-2">آپلود تصویر</label>
+            <input
+                type="file"
+                accept="image/*"
+                onChange={onImageUpload}
+                className="hidden"
+                id="image-upload"
+            />
+            <Button
+                variant="outline"
+                onClick={() => document.getElementById("image-upload")?.click()}
+                className="w-full"
+            >
+                <Gallery size={20} />
+                انتخاب تصویر
+            </Button>
+        </div>
+    );
+};
+
+export default ImageUpload;
+

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

@@ -0,0 +1,39 @@
+import { useEditorStore, type ToolType } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+const LinkInput = () => {
+    return (
+        <div className="space-y-4">
+            <div>
+                <Input
+                    label="آدرس لینک"
+                    placeholder="https://example.com"
+                    onEnter={() => {
+                        const input = document.querySelector('input[placeholder="https://example.com"]') as HTMLInputElement;
+                        if (input?.value) {
+                            const newLink = {
+                                id: `link-${Date.now()}`,
+                                type: "link" as ToolType,
+                                x: 100,
+                                y: 100,
+                                text: input.value,
+                                linkUrl: input.value,
+                                fontSize: 24,
+                                fill: "#0000ff",
+                            };
+                            const { addObject } = useEditorStore.getState();
+                            addObject(newLink);
+                            input.value = "";
+                        }
+                    }}
+                />
+            </div>
+            <div className="text-sm text-gray-600">
+                <p>آدرس لینک را وارد کنید و Enter بزنید</p>
+            </div>
+        </div>
+    );
+};
+
+export default LinkInput;
+

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

@@ -0,0 +1,31 @@
+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/VideoInput.tsx

@@ -0,0 +1,38 @@
+import { useEditorStore, type ToolType } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+const VideoInput = () => {
+    return (
+        <div className="space-y-4">
+            <div>
+                <Input
+                    label="آدرس ویدیو"
+                    placeholder="https://example.com/video.mp4"
+                    onEnter={() => {
+                        const input = document.querySelector('input[placeholder="https://example.com/video.mp4"]') as HTMLInputElement;
+                        if (input?.value) {
+                            const newVideo = {
+                                id: `video-${Date.now()}`,
+                                type: "video" as ToolType,
+                                x: 100,
+                                y: 100,
+                                width: 400,
+                                height: 300,
+                                videoUrl: input.value,
+                            };
+                            const { addObject } = useEditorStore.getState();
+                            addObject(newVideo);
+                            input.value = "";
+                        }
+                    }}
+                />
+            </div>
+            <div className="text-sm text-gray-600">
+                <p>آدرس ویدیو را وارد کنید</p>
+            </div>
+        </div>
+    );
+};
+
+export default VideoInput;
+

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

@@ -0,0 +1,6 @@
+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";
+