Import source: src/components/RightPanel/GradientSection

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:17:16 +03:30
parent a0deff090e
commit 4572f972e9
1 changed files with 48 additions and 0 deletions
@@ -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>
+  );
+}