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

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

diff --git a/src/components/LeftPanel/LeftPanel.tsx b/src/components/LeftPanel/LeftPanel.tsx
new file mode 100644
index 0000000..bed2b8b
--- /dev/null
+++ b/src/components/LeftPanel/LeftPanel.tsx
@@ -0,0 +1,32 @@
+import { useQR } from '../../context/QRContext';
+import { QR_TYPES } from '../../config/qrTypes';
+import { TypeListItem } from './TypeListItem';
+
+export function LeftPanel() {
+  const { state, dispatch } = useQR();
+
+  return (
+    <div
+      className="flex-shrink-0 flex flex-col h-full overflow-y-auto"
+      style={{
+        width: 'var(--left-w)',
+        background: 'var(--bg-panel)',
+        borderRight: '1px solid var(--border)',
+      }}
+    >
+      <div className="p-4 xl:p-6 pb-3">
+        <h2 className="text-[16px] xl:text-[19px] font-bold" style={{ color: 'var(--text-primary)' }}>Select QR type</h2>
+      </div>
+      <div className="flex flex-col gap-1 px-2 xl:px-3 pb-6">
+        {QR_TYPES.map((config) => (
+          <TypeListItem
+            key={config.key}
+            config={config}
+            selected={state.selectedType === config.key}
+            onClick={() => dispatch({ type: 'SET_TYPE', payload: config.key })}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}