move custum shape to shapes

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

@@ -9,7 +9,6 @@ import {
     TextInstruction,
     StickerInstruction,
     GridInstruction,
-    CustomShapeInstruction,
 } from "./instructions";
 
 type ToolInstructionsProps = {
@@ -38,10 +37,10 @@ const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
         rectangle: <RectangleInstruction />,
         line: <RectangleInstruction />,
         arrow: <RectangleInstruction />,
+        "custom-shape": <RectangleInstruction />,
         text: <TextInstruction />,
         sticker: <StickerInstruction />,
         grid: <GridInstruction />,
-        "custom-shape": <CustomShapeInstruction />,
     };
 
     return simpleInstructions[tool] ?? null;

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

@@ -9,7 +9,6 @@ import {
     VideoSquare,
     Music,
     Link2,
-    Magicpen,
 } from "iconsax-react";
 import type { ToolType } from "../../store/editorStore";
 
@@ -23,7 +22,6 @@ const tools: Array<{ icon: (color: string, variant?: "Bold" | "Outline" | "Broke
     { icon: (color, variant) => <VideoSquare size={20} color={color} variant={variant} />, tool: "video", label: "ویدیو" },
     { icon: (color, variant) => <Music size={20} color={color} variant={variant} />, tool: "audio", label: "صدا" },
     { icon: (color, variant) => <Sticker size={20} color={color} variant={variant} />, tool: "sticker", label: "استیکر" },
-    { icon: (color, variant) => <Magicpen size={20} color={color} variant={variant} />, tool: "custom-shape", label: "شکل سفارشی" },
 ];
 
 type ToolsBarProps = {
@@ -37,7 +35,7 @@ const ToolsBar = ({ tool, onToolClick }: ToolsBarProps) => {
             {tools.map((item, index) => {
                 const isActive =
                     item.tool === "rectangle"
-                        ? tool === "rectangle" || tool === "line" || tool === "arrow"
+                        ? tool === "rectangle" || tool === "line" || tool === "arrow" || tool === "custom-shape"
                         : tool === item.tool;
                 const iconColor = "black";
                 const iconVariant: "Bold" | "Outline" | "Broken" | "Bulk" | "Linear" | "TwoTone" | undefined = isActive ? "Bold" : "Outline";

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

@@ -1,5 +1,6 @@
 import { type FC } from "react";
-import { ArrowLeft, Minus } from "iconsax-react";
+import { ArrowLeft, Magicpen, Minus } from "iconsax-react";
+import CustomShapeInstruction from "./CustomShapeInstruction";
 import SquareIcon from "@/assets/icons/square.svg";
 import CircleIcon from "@/assets/icons/circle.svg";
 import TriangleIcon from "@/assets/icons/triangle.svg";
@@ -19,6 +20,7 @@ const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: str
 const drawOptions = [
     { tool: "line" as const, label: "خط", Icon: Minus },
     { tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
+    { tool: "custom-shape" as const, label: "سفارشی", Icon: Magicpen },
 ];
 
 const RectangleInstruction: FC = () => {
@@ -86,6 +88,12 @@ const RectangleInstruction: FC = () => {
                     {tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}
                 </p>
             )}
+
+            {tool === "custom-shape" && (
+                <div className="mt-9">
+                    <CustomShapeInstruction />
+                </div>
+            )}
         </div>
     );
 };