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

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

diff --git a/src/components/RightPanel/ThemeSection.tsx b/src/components/RightPanel/ThemeSection.tsx
new file mode 100644
index 0000000..e60d1f7
--- /dev/null
+++ b/src/components/RightPanel/ThemeSection.tsx
@@ -0,0 +1,35 @@
+import { useQR } from '../../context/QRContext';
+import type { Theme } from '../../types';
+
+const THEMES: { key: Theme; label: string; gradient: string }[] = [
+  { key: 'paper',    label: 'Paper',    gradient: 'radial-gradient(circle at 40% 35%, #FEFDF7 0%, #EDE8D8 60%, #D8CEB8 100%)' },
+  { key: 'midnight', label: 'Midnight', gradient: 'radial-gradient(circle at 40% 35%, #2A2D4A 0%, #111328 60%, #080912 100%)' },
+  { key: 'pastel',   label: 'Pastel',   gradient: 'radial-gradient(circle at 40% 35%, #FFE8F0 0%, #F9C8D8 60%, #F0A8C0 100%)' },
+];
+
+export function ThemeSection() {
+  const { state, dispatch } = useQR();
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-secondary)' }}>Theme</h3>
+      <div className="flex gap-3">
+        {THEMES.map(theme => (
+          <button
+            key={theme.key}
+            onClick={() => dispatch({ type: 'SET_THEME', payload: theme.key })}
+            className="flex-1 flex flex-col items-center gap-2 p-3 rounded-[12px] cursor-pointer transition-all duration-150"
+            style={{
+              border: state.theme === theme.key ? '2px solid #7C6FE0' : '1px solid var(--border-sub)',
+              background: state.theme === theme.key ? 'var(--sel-bg)' : 'var(--bg-card)',
+            }}
+          >
+            <div className="w-12 h-12 rounded-full shadow-lg" style={{ background: theme.gradient }} />
+            <span className="text-[13px] font-medium" style={{ color: state.theme === theme.key ? 'var(--sel-text)' : 'var(--text-muted)' }}>
+              {theme.label}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}