From 4572f972e982b8a6ef2f4562c978c843f61d4dbd Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:16 +0330
Subject: [PATCH] Import source: src/components/RightPanel/GradientSection

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/components/RightPanel/GradientSection.tsx | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/RightPanel/GradientSection.tsx

diff --git a/src/components/RightPanel/GradientSection.tsx b/src/components/RightPanel/GradientSection.tsx
new file mode 100644
index 0000000..c5a11c2
--- /dev/null
+++ b/src/components/RightPanel/GradientSection.tsx
@@ -0,0 +1,48 @@
+import { useQR } from '../../context/QRContext';
+import { QR_COLORS } from '../../config/styleOptions';
+
+export function GradientSection() {
+  const { state, dispatch } = useQR();
+  const dotColor = state.qrColor === 'rainbow' ? '#7C3AED' : state.qrColor;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-secondary)' }}>Gradient</h3>
+        <button
+          onClick={() => dispatch({ type: 'SET_GRADIENT', payload: !state.gradientEnabled })}
+          className="relative w-10 h-5 rounded-full transition-all duration-200 cursor-pointer flex-shrink-0"
+          style={{ background: state.gradientEnabled ? '#7C6FE0' : 'var(--bg-elevated)', border: '1px solid var(--border-sub)' }}
+        >
+          <span className="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-all duration-200"
+            style={{ left: state.gradientEnabled ? '20px' : '2px' }} />
+        </button>
+      </div>
+
+      {state.gradientEnabled && (
+        <div className="flex flex-col gap-3 form-appear">
+          {/* Preview */}
+          <div className="h-8 rounded-[8px]"
+            style={{ background: `linear-gradient(135deg, ${dotColor}, ${state.gradientColor2})` }} />
+
+          {/* Second color picker */}
+          <div className="flex flex-col gap-2">
+            <span className="text-[12px]" style={{ color: 'var(--text-muted)' }}>End color</span>
+            <div className="flex gap-2 flex-wrap">
+              {QR_COLORS.filter(c => c !== 'rainbow').map(color => (
+                <button key={color}
+                  onClick={() => dispatch({ type: 'SET_GRADIENT_COLOR2', payload: color })}
+                  className="w-8 h-8 rounded-full flex-shrink-0 cursor-pointer transition-transform hover:scale-110"
+                  style={{
+                    background: color,
+                    outline: state.gradientColor2 === color ? '2px solid #7C6FE0' : 'none',
+                    outlineOffset: '2px',
+                  }} />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}