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

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

diff --git a/src/components/RightPanel/RightPanel.tsx b/src/components/RightPanel/RightPanel.tsx
new file mode 100644
index 0000000..623b6d1
--- /dev/null
+++ b/src/components/RightPanel/RightPanel.tsx
@@ -0,0 +1,50 @@
+import { ThemeSection } from './ThemeSection';
+import { PatternSection } from './PatternSection';
+import { ColorsSection } from './ColorsSection';
+import { GradientSection } from './GradientSection';
+import { CornerStyleSection } from './CornerStyleSection';
+import { LogoSection } from './LogoSection';
+import { FrameLabelSection } from './FrameLabelSection';
+import { DownloadSizeSection } from './DownloadSizeSection';
+
+interface Props { embedded?: boolean }
+
+function Divider() {
+  return <div style={{ borderTop: '1px solid var(--border)' }} />;
+}
+
+export function RightPanel({ embedded }: Props) {
+  return (
+    <div
+      className="flex-shrink-0 flex flex-col h-full overflow-y-auto"
+      style={{
+        width: embedded ? '100%' : 'var(--right-w)',
+        background: 'var(--bg-panel)',
+        borderLeft: embedded ? 'none' : '1px solid var(--border)',
+      }}
+    >
+      {!embedded && (
+        <div className="p-5 pb-4 xl:p-6 xl:pb-4">
+          <h2 className="text-[17px] xl:text-[19px] font-bold" style={{ color: 'var(--text-primary)' }}>Style your QR</h2>
+        </div>
+      )}
+      <div className="flex flex-col gap-5 px-4 xl:px-6 pb-8 pt-4">
+        <ThemeSection />
+        <Divider />
+        <PatternSection />
+        <Divider />
+        <CornerStyleSection />
+        <Divider />
+        <ColorsSection />
+        <Divider />
+        <GradientSection />
+        <Divider />
+        <LogoSection />
+        <Divider />
+        <FrameLabelSection />
+        <Divider />
+        <DownloadSizeSection />
+      </div>
+    </div>
+  );
+}