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:
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user