Create shapes square + circle + ....

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

@@ -1,53 +1,54 @@
-import { type FC } from 'react'
-import SquareIcon from '@/assets/icons/square.svg'
-import CircleIcon from '@/assets/icons/circle.svg'
-import TriangleIcon from '@/assets/icons/triangle.svg'
-import StarIcon from '@/assets/icons/Star.svg'
-import { Switch } from '@/components/ui/switch'
+import { type FC } from "react";
+import SquareIcon from "@/assets/icons/square.svg";
+import CircleIcon from "@/assets/icons/circle.svg";
+import TriangleIcon from "@/assets/icons/triangle.svg";
+import StarIcon from "@/assets/icons/Star.svg";
+import { Switch } from "@/components/ui/switch";
+import { clx } from "@/helpers/utils";
+import { useShapeStore, type ShapeType } from "@/pages/editor/store/shapeStore";
 
-const RectangleInstruction: FC = () => (
-    <div>
-        <h2 className='font-bold'>
-            اشکال
-        </h2>
+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" },
+];
 
-        <div className='flex flex-wrap mt-7'>
-            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
-                <img src={SquareIcon} alt='square' className='w-6' />
-                <div className='text-[13px]'>
-                    مربع
-                </div>
+const RectangleInstruction: FC = () => {
+    const { activeShape, setActiveShape } = useShapeStore();
+
+    return (
+        <div>
+            <h2 className="font-bold">اشکال</h2>
+
+            <div className="mt-7 flex flex-wrap gap-3 text-[#B2B2B2]">
+                {shapeOptions.map((shape) => {
+                    const isActive = activeShape === shape.id;
+                    return (
+                        <button
+                            type="button"
+                            key={shape.id}
+                            onClick={() => setActiveShape(shape.id)}
+                            className={clx(
+                                "size-[60px] flex flex-col gap-1 justify-center items-center rounded-xl text-[13px] transition-colors",
+                                isActive ? "border-black text-black" : "border-transparent hover:border-black/20",
+                            )}
+                            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>
+                    );
+                })}
             </div>
-            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
-                <img src={CircleIcon} alt='circle' className='w-6' />
-                <div className='text-[13px]'>
-                    دایره
-                </div>
-            </div>
-            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
-                <img src={TriangleIcon} alt='triangle' className='w-6' />
-                <div className='text-[13px]'>
-                    مثلث
-                </div>
-            </div>
-            <div className='size-[60px] flex flex-col gap-1 justify-center items-center'>
-                <img src={StarIcon} alt='star' className='w-6' />
-                <div className='text-[13px]'>
-                    انتزاعی
-                </div>
+
+            <div className="mt-9 flex items-center justify-between">
+                <div className="text-[13px]">استفاده برای ماسک</div>
+                <Switch />
             </div>
         </div>
-
-        <div className='mt-9 flex justify-between items-center'>
-            <div className='text-[13px]'>
-                استفاده برای ماسک
-            </div>
-            <Switch
-            />
-
-        </div>
-    </div>
-);
+    );
+};
 
 export default RectangleInstruction;