giers10/lang-quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Instagram metadata rendering in QuizRunner.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-01-08 01:15:25 +01:00
parent 752b996a9e
commit 7530cc5f7e
1 changed files with 3 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/QuizRunner.tsx
View File

@@ -171,6 +171,8 @@ function QuestionRenderer({
); );
} }
import IgMetaBlock from './IgMetaBlock';
function ExplanationPanel({ question, targets }: { question: QuizQuestionWithEntry; targets: TargetHit[] }) { function ExplanationPanel({ question, targets }: { question: QuizQuestionWithEntry; targets: TargetHit[] }) {
return ( return (
<div className="explanation"> <div className="explanation">
@@ -205,31 +207,7 @@ function ExplanationPanel({ question, targets }: { question: QuizQuestionWithEnt
<p className="muted">No linked study items were found for this question.</p> <p className="muted">No linked study items were found for this question.</p>
)} )}
<VideoPlayer src={question.video_url} /> <VideoPlayer src={question.video_url} />
{question.ig_meta && ( {question.ig_meta && <IgMetaBlock ig={question.ig_meta} />}
<div className="ig-block">
{question.ig_meta.profile_pic_url ? (
<a href={question.ig_meta.profile_url || '#'} target="_blank" rel="noreferrer">
<img className="ig-avatar" src={question.ig_meta.profile_pic_url} alt={question.ig_meta.username || 'profile'} />
</a>
) : (
<div className="ig-avatar placeholder" />
)}
<div className="ig-body">
<div className="ig-row">
{question.ig_meta.username ? (
<a className="ig-name" href={question.ig_meta.profile_url || '#'} target="_blank" rel="noreferrer">
{question.ig_meta.username}
</a>
) : (
<span className="ig-name">Instagram</span>
)}
{question.ig_meta.full_name && <span className="muted"> · {question.ig_meta.full_name}</span>}
</div>
<div className="muted">{question.ig_meta.post_date || ''}</div>
{question.ig_meta.description && <p className="ig-desc">{question.ig_meta.description}</p>}
</div>
</div>
)}
</div> </div>
); );
} }