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

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

diff --git a/src/components/LeftPanel/TypeListItem.tsx b/src/components/LeftPanel/TypeListItem.tsx
new file mode 100644
index 0000000..3c5d6a8
--- /dev/null
+++ b/src/components/LeftPanel/TypeListItem.tsx
@@ -0,0 +1,38 @@
+import { useTheme } from '../../context/ThemeContext';
+import type { QRTypeConfig } from '../../config/qrTypes';
+
+interface Props {
+  config: QRTypeConfig;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export function TypeListItem({ config, selected, onClick }: Props) {
+  const { isDark } = useTheme();
+  const thumb = isDark ? config.thumbDark : config.thumb;
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 p-3 rounded-[14px] text-left transition-all duration-150 cursor-pointer"
+      style={{
+        border: selected ? '2px solid #7C6FE0' : '2px solid transparent',
+        background: selected ? 'var(--sel-bg)' : 'transparent',
+      }}
+      onMouseEnter={e => { if (!selected) (e.currentTarget as HTMLElement).style.background = 'var(--hover-bg)'; }}
+      onMouseLeave={e => { if (!selected) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+    >
+      <img
+        src={thumb}
+        alt={config.label}
+        className="w-[72px] h-12 rounded-[10px] object-cover flex-shrink-0"
+      />
+      <span
+        className="text-[15px] font-medium transition-colors"
+        style={{ color: selected ? 'var(--sel-text)' : 'var(--text-item)' }}
+      >
+        {config.label}
+      </span>
+    </button>
+  );
+}