From 1a272371f4ee582063091af229cba41c7742e911 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Tue, 28 Apr 2026 07:52:16 +0200
Subject: [PATCH] Add image preview under selected word in Match exercise

When user clicks an EN word, the corresponding image (Wikipedia
photo or emoji) appears below the match grid. Emoji shown as
large text (6xl), Wikipedia photos as max-h 160px image.

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

diff --git a/studio-v2/app/learn/[unitId]/match/page.tsx b/studio-v2/app/learn/[unitId]/match/page.tsx
index e393d92..e5bda07 100644
--- a/studio-v2/app/learn/[unitId]/match/page.tsx
+++ b/studio-v2/app/learn/[unitId]/match/page.tsx
@@ -11,6 +11,7 @@ import { ExerciseLayout } from '@/components/learn/ExerciseLayout'
 interface QAItem {
   id: string; question: string; answer: string
   translations?: Record<string, any>
+  image_url?: string
 }
 
 function getApiBase() { return '' }
@@ -190,6 +191,28 @@ export default function MatchPage() {
             ))}
           </div>
         </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>
+          )
+        })()}
       )}
     </ExerciseLayout>
   )