From fc2fe98bd985fd067ff967ed8afdee8c4c84f379 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Tue, 28 Apr 2026 08:24:19 +0200
Subject: [PATCH] Fix: Extract SelectedImage as component (IIFE breaks JSX
 parser)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 studio-v2/app/learn/[unitId]/match/page.tsx | 39 ++++++++++-----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/studio-v2/app/learn/[unitId]/match/page.tsx b/studio-v2/app/learn/[unitId]/match/page.tsx
index e5bda07..d3ee469 100644
--- a/studio-v2/app/learn/[unitId]/match/page.tsx
+++ b/studio-v2/app/learn/[unitId]/match/page.tsx
@@ -16,6 +16,24 @@ interface QAItem {
 
 function getApiBase() { return '' }
 
+function SelectedImage({ items, selectedId, isDark }: { items: QAItem[]; selectedId: string | null; isDark: boolean }) {
+  if (!selectedId) return null
+  const item = items.find(i => i.id === selectedId)
+  if (!item?.image_url) return null
+  const isEmoji = item.image_url.length <= 4
+  return (
+    <div className={`mt-4 rounded-2xl overflow-hidden flex items-center justify-center ${
+      isDark ? 'bg-white/5' : 'bg-slate-50'
+    }`} style={{ minHeight: isEmoji ? 80 : 120 }}>
+      {isEmoji ? (
+        <span className="text-6xl">{item.image_url}</span>
+      ) : (
+        <img src={item.image_url} alt={item.question} className="max-h-[160px] object-contain rounded-xl" />
+      )}
+    </div>
+  )
+}
+
 export default function MatchPage() {
   const { unitId } = useParams<{ unitId: string }>()
   const router = useRouter()
@@ -193,26 +211,7 @@ export default function MatchPage() {
         </div>
 
         {/* Image preview for selected word */}
-        {selectedLeft && (() => {
-          const item = roundItems.find(i => i.id === selectedLeft)
-          if (!item?.image_url) return null
-          const isEmoji = item.image_url.length <= 4
-          return (
-            <div className={`mt-4 rounded-2xl overflow-hidden flex items-center justify-center ${
-              isDark ? 'bg-white/5' : 'bg-slate-50'
-            }`} style={{ minHeight: isEmoji ? 80 : 120 }}>
-              {isEmoji ? (
-                <span className="text-6xl">{item.image_url}</span>
-              ) : (
-                <img
-                  src={item.image_url}
-                  alt={item.question}
-                  className="max-h-[160px] object-contain rounded-xl"
-                />
-              )}
-            </div>
-          )
-        })()}
+        <SelectedImage items={roundItems} selectedId={selectedLeft} isDark={isDark} />
       )}
     </ExerciseLayout>
   )