grediant in a shape

src/pages/editor/components/tools/RectangleShape.tsx

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import { Rect } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
+import { getKonvaGradientProps } from "../../utils/gradient";
 
 const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
   const shapeRef = useRef<Konva.Rect>(null);
@@ -27,6 +28,15 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
   const displayStrokeWidth = isSelected
     ? (hasStroke ? actualStrokeWidth : 3)
     : (isMask && showGuide ? 2 : actualStrokeWidth);
+  const gradientProps = isMask
+    ? {}
+    : getKonvaGradientProps(
+      obj.fillType,
+      obj.gradient,
+      obj.width || 100,
+      obj.height || 100,
+      "rect",
+    );
 
   return (
     <Rect
@@ -39,6 +49,7 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
       height={obj.height || 100}
       cornerRadius={cornerRadius}
       fill={isMask ? "transparent" : obj.fill}
+      {...gradientProps}
       stroke={displayStroke}
       strokeWidth={displayStrokeWidth}
       dash={isMask && showGuide ? [10, 5] : undefined}