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 ( -
- {tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"} -
- )} - - {tool === "custom-shape" && ( -{tool === "line" ? "برای رسم خط، روی کانوس کلیک کرده و بکشید" : "برای رسم پیکان، روی کانوس کلیک کرده و بکشید"}
+ )} + + {tool === "custom-shape" && ( +