add konva js to project + create some components with ai

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

@@ -0,0 +1,33 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type LineSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const LineSettings = ({ selectedObject, onUpdate }: LineSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="رنگ خط"
+                type="color"
+                value={selectedObject.stroke || "#000000"}
+                onChange={(e) => onUpdate(selectedObject.id, { stroke: e.target.value })}
+            />
+            <Input
+                label="ضخامت خط"
+                type="number"
+                value={selectedObject.strokeWidth || 2}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        strokeWidth: parseInt(e.target.value) || 2,
+                    })
+                }
+            />
+        </>
+    );
+};
+
+export default LineSettings;
+

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

@@ -0,0 +1,44 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type LinkSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const LinkSettings = ({ selectedObject, onUpdate }: LinkSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="آدرس لینک"
+                value={selectedObject.linkUrl || ""}
+                onChange={(e) => onUpdate(selectedObject.id, { linkUrl: e.target.value })}
+                placeholder="https://example.com"
+            />
+            <Input
+                label="متن لینک"
+                value={selectedObject.text || ""}
+                onChange={(e) => onUpdate(selectedObject.id, { text: e.target.value })}
+            />
+            <Input
+                label="اندازه فونت"
+                type="number"
+                value={selectedObject.fontSize || 24}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        fontSize: parseInt(e.target.value) || 24,
+                    })
+                }
+            />
+            <Input
+                label="رنگ متن"
+                type="color"
+                value={selectedObject.fill || "#0000ff"}
+                onChange={(e) => onUpdate(selectedObject.id, { fill: e.target.value })}
+            />
+        </>
+    );
+};
+
+export default LinkSettings;
+

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

@@ -0,0 +1,59 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type ShapeSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="عرض"
+                type="number"
+                value={selectedObject.width || 100}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        width: parseInt(e.target.value) || 100,
+                    })
+                }
+            />
+            <Input
+                label="ارتفاع"
+                type="number"
+                value={selectedObject.height || 100}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        height: parseInt(e.target.value) || 100,
+                    })
+                }
+            />
+            <Input
+                label="رنگ پس‌زمینه"
+                type="color"
+                value={selectedObject.fill || "#3b82f6"}
+                onChange={(e) => onUpdate(selectedObject.id, { fill: e.target.value })}
+            />
+            <Input
+                label="رنگ خط"
+                type="color"
+                value={selectedObject.stroke || "#1e40af"}
+                onChange={(e) => onUpdate(selectedObject.id, { stroke: e.target.value })}
+            />
+            <Input
+                label="ضخامت خط"
+                type="number"
+                value={selectedObject.strokeWidth || 2}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        strokeWidth: parseInt(e.target.value) || 2,
+                    })
+                }
+            />
+        </>
+    );
+};
+
+export default ShapeSettings;
+

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

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

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

@@ -0,0 +1,38 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type TextSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="متن"
+                value={selectedObject.text || ""}
+                onChange={(e) => onUpdate(selectedObject.id, { text: e.target.value })}
+            />
+            <Input
+                label="اندازه فونت"
+                type="number"
+                value={selectedObject.fontSize || 24}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        fontSize: parseInt(e.target.value) || 24,
+                    })
+                }
+            />
+            <Input
+                label="رنگ متن"
+                type="color"
+                value={selectedObject.fill || "#000000"}
+                onChange={(e) => onUpdate(selectedObject.id, { fill: e.target.value })}
+            />
+        </>
+    );
+};
+
+export default TextSettings;
+

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

@@ -0,0 +1,47 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+
+type TransformSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const TransformSettings = ({ selectedObject, onUpdate }: TransformSettingsProps) => {
+    return (
+        <div className="pt-4 border-t border-border">
+            <Input
+                label="موقعیت X"
+                type="number"
+                value={Math.round(selectedObject.x)}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        x: parseInt(e.target.value) || 0,
+                    })
+                }
+            />
+            <Input
+                label="موقعیت Y"
+                type="number"
+                value={Math.round(selectedObject.y)}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        y: parseInt(e.target.value) || 0,
+                    })
+                }
+            />
+            <Input
+                label="چرخش (درجه)"
+                type="number"
+                value={selectedObject.rotation || 0}
+                onChange={(e) =>
+                    onUpdate(selectedObject.id, {
+                        rotation: parseInt(e.target.value) || 0,
+                    })
+                }
+            />
+        </div>
+    );
+};
+
+export default TransformSettings;
+

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

@@ -0,0 +1,25 @@
+import type { EditorObject } from "../../../store/editorStore";
+import Input from "@/components/Input";
+import SizeSettings from "./SizeSettings";
+
+type VideoSettingsProps = {
+    selectedObject: EditorObject;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const VideoSettings = ({ selectedObject, onUpdate }: VideoSettingsProps) => {
+    return (
+        <>
+            <Input
+                label="آدرس ویدیو"
+                value={selectedObject.videoUrl || ""}
+                onChange={(e) => onUpdate(selectedObject.id, { videoUrl: e.target.value })}
+                placeholder="https://example.com/video.mp4"
+            />
+            <SizeSettings selectedObject={selectedObject} onUpdate={onUpdate} defaultWidth={400} defaultHeight={300} />
+        </>
+    );
+};
+
+export default VideoSettings;
+

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

@@ -0,0 +1,8 @@
+export { default as TextSettings } from "./TextSettings";
+export { default as ShapeSettings } from "./ShapeSettings";
+export { default as LineSettings } from "./LineSettings";
+export { default as SizeSettings } from "./SizeSettings";
+export { default as LinkSettings } from "./LinkSettings";
+export { default as VideoSettings } from "./VideoSettings";
+export { default as TransformSettings } from "./TransformSettings";
+