Fix: Extract SelectedImage as component (IIFE breaks JSX parser)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-28 08:24:19 +02:00
parent 1a272371f4
commit fc2fe98bd9

View File

@@ -16,6 +16,24 @@ interface QAItem {
function getApiBase() { return '' } 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() { export default function MatchPage() {
const { unitId } = useParams<{ unitId: string }>() const { unitId } = useParams<{ unitId: string }>()
const router = useRouter() const router = useRouter()
@@ -193,26 +211,7 @@ export default function MatchPage() {
</div> </div>
{/* Image preview for selected word */} {/* Image preview for selected word */}
{selectedLeft && (() => { <SelectedImage items={roundItems} selectedId={selectedLeft} isDark={isDark} />
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> </ExerciseLayout>
) )