grediant in a shape

src/pages/editor/components/SettingsPanel.tsx

@@ -5,6 +5,7 @@ import type { DisplayStyle, BackgroundType } from '../store/editorStore'
 import UploadBoxDraggble from '@/components/UploadBoxDraggble'
 import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
 import ColorsImage from '@/assets/images/colors.png'
+import ColorPicker from '@/components/ColorPicker'
 
 const PRESET_COLORS = [
   '#a8edcf',
@@ -23,6 +24,7 @@ const DISPLAY_STYLE_OPTIONS: { value: DisplayStyle; label: string }[] = [
 
 const BACKGROUND_TYPE_OPTIONS: { value: BackgroundType; label: string }[] = [
   { value: 'color', label: 'رنگ' },
+  { value: 'gradient', label: 'گرادیانت' },
   { value: 'image', label: 'تصویر' },
 ]
 
@@ -39,6 +41,11 @@ const SettingsPanel = () => {
   const currentPage = pages.find((page) => page.id === currentPageId)
   const backgroundType = currentPage?.backgroundType ?? 'color'
   const backgroundColor = currentPage?.backgroundColor ?? '#ffffff'
+  const backgroundGradient = currentPage?.backgroundGradient ?? {
+    from: '#ffffff',
+    to: '#e2e8f0',
+    angle: 135,
+  }
   const backgroundImageUrl = currentPage?.backgroundImageUrl ?? ''
   const [uploadedPreviews, setUploadedPreviews] = useState<string[]>(
     backgroundImageUrl ? [backgroundImageUrl] : []
@@ -145,7 +152,20 @@ const SettingsPanel = () => {
             <label key={opt.value} className="flex items-center gap-1.5 cursor-pointer select-none">
               <span className="text-xs text-gray-600">{opt.label}</span>
               <div
-                onClick={() => updateCurrentPageBackground({ backgroundType: opt.value })}
+                onClick={() =>
+                  updateCurrentPageBackground({
+                    backgroundType: opt.value,
+                    ...(opt.value === 'gradient'
+                      ? {
+                        backgroundGradient: currentPage?.backgroundGradient ?? {
+                          from: '#ffffff',
+                          to: '#e2e8f0',
+                          angle: 135,
+                        },
+                      }
+                      : {}),
+                  })
+                }
                 className={clx(
                   'w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors cursor-pointer',
                   backgroundType === opt.value
@@ -209,6 +229,73 @@ const SettingsPanel = () => {
           </div>
         )}
 
+        {backgroundType === 'gradient' && (
+          <div className="space-y-3">
+            <p className="text-xs text-gray-500">گرادیانت خطی (سبک Figma)</p>
+            <ColorPicker
+              label="رنگ شروع"
+              value={backgroundGradient.from}
+              onChange={(value) =>
+                updateCurrentPageBackground({
+                  backgroundGradient: { ...backgroundGradient, from: value },
+                })
+              }
+            />
+            <ColorPicker
+              label="رنگ پایان"
+              value={backgroundGradient.to}
+              onChange={(value) =>
+                updateCurrentPageBackground({
+                  backgroundGradient: { ...backgroundGradient, to: value },
+                })
+              }
+            />
+
+            <div className="space-y-1">
+              <label className="text-xs text-gray-500">زاویه</label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="range"
+                  min={0}
+                  max={360}
+                  value={backgroundGradient.angle}
+                  onChange={(e) =>
+                    updateCurrentPageBackground({
+                      backgroundGradient: {
+                        ...backgroundGradient,
+                        angle: Number(e.target.value),
+                      },
+                    })
+                  }
+                  className="w-full"
+                />
+                <input
+                  type="number"
+                  min={0}
+                  max={360}
+                  value={backgroundGradient.angle}
+                  onChange={(e) =>
+                    updateCurrentPageBackground({
+                      backgroundGradient: {
+                        ...backgroundGradient,
+                        angle: Number(e.target.value) || 0,
+                      },
+                    })
+                  }
+                  className="w-16 h-9 rounded-lg border border-border px-2 text-xs"
+                />
+              </div>
+            </div>
+
+            <div
+              className="h-12 rounded-xl border border-border"
+              style={{
+                backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.from} 0%, ${backgroundGradient.to} 100%)`,
+              }}
+            />
+          </div>
+        )}
+
         {/* ─── آپلود تصویر ─── */}
         {backgroundType === 'image' && (
           <div>