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

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

diff --git a/src/components/RightPanel/PatternSection.tsx b/src/components/RightPanel/PatternSection.tsx
new file mode 100644
index 0000000..a550a45
--- /dev/null
+++ b/src/components/RightPanel/PatternSection.tsx
@@ -0,0 +1,33 @@
+import { useQR } from '../../context/QRContext';
+import { useTheme } from '../../context/ThemeContext';
+import { PATTERNS } from '../../config/styleOptions';
+
+export function PatternSection() {
+  const { state, dispatch } = useQR();
+  const { isDark } = useTheme();
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-[14px] font-semibold" style={{ color: 'var(--text-secondary)' }}>Pattern</h3>
+      <div className="flex gap-2">
+        {PATTERNS.map(p => (
+          <button
+            key={p.key}
+            onClick={() => dispatch({ type: 'SET_PATTERN', payload: p.key })}
+            className="w-[72px] h-[72px] flex items-center justify-center rounded-[12px] cursor-pointer transition-all duration-150"
+            style={{
+              border: state.pattern === p.key ? '2px solid #7C6FE0' : '1px solid var(--border-sub)',
+              background: state.pattern === p.key ? 'var(--sel-bg)' : 'var(--bg-card)',
+            }}
+          >
+            <img
+              src={p.svg} alt={p.key}
+              className="w-[50px] h-[50px]"
+              style={{ filter: isDark ? 'invert(1) brightness(0.55)' : 'none' }}
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}