From 8b194fd7cde70621edeba8a93c6cd8b5d2e8a72e Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 15 Jun 2026 14:15:57 +0330
Subject: [PATCH] change icon

---
 .../instructions/RectangleInstruction.tsx     | 150 +++++++++---------
 1 file changed, 71 insertions(+), 79 deletions(-)

diff --git a/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx b/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
index ec7a8c6..658f079 100644
--- a/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
+++ b/src/pages/editor/components/sidebar/instructions/RectangleInstruction.tsx
@@ -1,101 +1,93 @@
-import { type FC } from "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";
+import SquareIcon from "@/assets/icons/square.svg";
 import StarIcon from "@/assets/icons/Star.svg";
+import TriangleIcon from "@/assets/icons/triangle.svg";
 import { Switch } from "@/components/ui/switch";
 import { clx } from "@/helpers/utils";
 import { useEditorStore } from "@/pages/editor/store/editorStore";
 import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";
+import { ArrowLeft, Minus, PenTool } from "iconsax-react";
+import { type FC } from "react";
+import CustomShapeInstruction from "./CustomShapeInstruction";
 
 const shapeOptions: Array<{ id: ShapeType; label: string; icon: string; alt: string }> = [
-    { id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
-    { id: "circle", label: "دایره", icon: CircleIcon, alt: "circle" },
-    { id: "triangle", label: "مثلث", icon: TriangleIcon, alt: "triangle" },
-    { id: "abstract", label: "انتزاعی", icon: StarIcon, alt: "abstract" },
+  { id: "square", label: "مربع", icon: SquareIcon, alt: "square" },
+  { id: "circle", label: "دایره", icon: CircleIcon, alt: "circle" },
+  { id: "triangle", label: "مثلث", icon: TriangleIcon, alt: "triangle" },
+  { id: "abstract", label: "انتزاعی", icon: StarIcon, alt: "abstract" },
 ];
 
 const drawOptions = [
-    { tool: "line" as const, label: "خط", Icon: Minus },
-    { tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
-    { tool: "custom-shape" as const, label: "سفارشی", Icon: Magicpen },
+  { tool: "line" as const, label: "خط", Icon: Minus },
+  { tool: "arrow" as const, label: "پیکان", Icon: ArrowLeft },
+  { tool: "custom-shape" as const, label: "سفارشی", Icon: PenTool },
 ];
 
 const RectangleInstruction: FC = () => {
-    const tool = useEditorStore((state) => state.tool);
-    const setTool = useEditorStore((state) => state.setTool);
-    const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();
+  const tool = useEditorStore((state) => state.tool);
+  const setTool = useEditorStore((state) => state.setTool);
+  const { activeShape, setActiveShape, useAsMask, setUseAsMask } = useShapeStore();
 
-    const handleShapeClick = (shapeId: ShapeType) => {
-        setActiveShape(shapeId);
-        setTool("rectangle");
-    };
+  const handleShapeClick = (shapeId: ShapeType) => {
+    setActiveShape(shapeId);
+    setTool("rectangle");
+  };
 
-    return (
-        <div>
-            <h2 className="font-bold">اشکال</h2>
+  return (
+    <div>
+      <h2 className="font-bold">اشکال</h2>
 
-            <div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
-                {shapeOptions.map((shape) => {
-                    const isActive = tool === "rectangle" && activeShape === shape.id;
-                    return (
-                        <button
-                            type="button"
-                            key={shape.id}
-                            onClick={() => handleShapeClick(shape.id)}
-                            className={clx(
-                                "size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
-                                isActive ? "" : "border-transparent",
-                            )}
-                            aria-pressed={isActive}
-                        >
-                            <img src={shape.icon} alt={shape.alt} className={clx("w-6", isActive && "filterBlack")} />
-                            <div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{shape.label}</div>
-                        </button>
-                    );
-                })}
-                {drawOptions.map(({ tool: drawTool, label, Icon }) => {
-                    const isActive = tool === drawTool;
-                    return (
-                        <button
-                            type="button"
-                            key={drawTool}
-                            onClick={() => setTool(drawTool)}
-                            className={clx(
-                                "size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
-                                isActive ? "" : "border-transparent",
-                            )}
-                            aria-pressed={isActive}
-                        >
-                            <Icon size={24} color={isActive ? "black" : "#7A7A7A"} variant={isActive ? "Bold" : "Outline"} />
-                            <div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{label}</div>
-                        </button>
-                    );
-                })}
-            </div>
+      <div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
+        {shapeOptions.map((shape) => {
+          const isActive = tool === "rectangle" && activeShape === shape.id;
+          return (
+            <button
+              type="button"
+              key={shape.id}
+              onClick={() => handleShapeClick(shape.id)}
+              className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
+              aria-pressed={isActive}
+            >
+              <img src={shape.icon} alt={shape.alt} className={clx("w-6", isActive && "filterBlack")} />
+              <div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{shape.label}</div>
+            </button>
+          );
+        })}
+        {drawOptions.map(({ tool: drawTool, label, Icon }) => {
+          const isActive = tool === drawTool;
+          return (
+            <button
+              type="button"
+              key={drawTool}
+              onClick={() => setTool(drawTool)}
+              className={clx("size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors", isActive ? "" : "border-transparent")}
+              aria-pressed={isActive}
+            >
+              <Icon size={24} color={isActive ? "black" : "#7A7A7A"} variant={isActive ? "Bold" : "Outline"} />
+              <div className={clx(isActive ? "text-black" : "text-[#7A7A7A]")}>{label}</div>
+            </button>
+          );
+        })}
+      </div>
 
-            {tool === "rectangle" && (
-                <div className="mt-9 flex items-center justify-between">
-                    <div className="text-[13px]">استفاده برای ماسک</div>
-                    <Switch checked={useAsMask} onCheckedChange={setUseAsMask} />
-                </div>
-            )}
-
-            {(tool === "line" || tool === "arrow") && (
-                <p className="mt-9 text-sm text-gray-600">
-                    {tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}
-                </p>
-            )}
-
-            {tool === "custom-shape" && (
-                <div className="mt-9">
-                    <CustomShapeInstruction />
-                </div>
-            )}
+      {tool === "rectangle" && (
+        <div className="mt-9 flex items-center justify-between">
+          <div className="text-[13px]">استفاده برای ماسک</div>
+          <Switch checked={useAsMask} onCheckedChange={setUseAsMask} />
         </div>
-    );
+      )}
+
+      {(tool === "line" || tool === "arrow") && (
+        <p className="mt-9 text-sm text-gray-600">{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}</p>
+      )}
+
+      {tool === "custom-shape" && (
+        <div className="mt-9">
+          <CustomShapeInstruction />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default RectangleInstruction;