Create all components

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;