math-quiz/components/game/AnswerResultLine.tsx

import type { ReactNode } from "react";

import KatexRenderer from "@/components/math/KatexRenderer";

interface AnswerResultLineProps {
  expressionLatex: string;
  userAnswerLatex: string;
  correctAnswerLatex: string;
  correct: boolean;
  prefix?: ReactNode;
  userAnswerContent?: ReactNode;
  correctAnswerContent?: ReactNode;
}

export default function AnswerResultLine({
  expressionLatex,
  userAnswerLatex,
  correctAnswerLatex,
  correct,
  prefix,
  userAnswerContent,
  correctAnswerContent,
}: AnswerResultLineProps) {
  return (
    <li
      className={`flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md px-4 py-3 text-lg font-semibold ring-1 ring-inset ${
        correct
          ? "bg-emerald-100 text-emerald-950 ring-emerald-200"
          : "bg-red-100 text-red-950 ring-red-200"
      }`}
    >
      {prefix}
      <KatexRenderer latex={expressionLatex} output="mathml" />
      <span aria-hidden="true">=</span>
      {userAnswerContent ?? (
        <span className={correct ? undefined : "text-red-700"}>
          <KatexRenderer latex={userAnswerLatex} output="mathml" />
        </span>
      )}
      {correct ? (
        <span
          aria-label="정답"
          role="img"
          className="inline-flex h-7 items-center text-2xl leading-none text-emerald-700"
        >
          ○
        </span>
      ) : (
        <>
          <span
            aria-label="오답"
            role="img"
            className="mr-2 inline-flex h-7 items-center text-2xl leading-none text-red-700"
          >
            ×
          </span>
          <span className="text-slate-700">
            (
            {correctAnswerContent ?? (
              <span className="font-bold">
                <KatexRenderer latex={correctAnswerLatex} output="mathml" />
              </span>
            )}
            )
          </span>
        </>
      )}
    </li>
  );
}