34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import "./resolution-choice.css";
|
|
|
|
export default function ResolutionChoice({
|
|
title,
|
|
busy,
|
|
onAnswer,
|
|
}: {
|
|
title: string;
|
|
busy: boolean;
|
|
onAnswer: (resolved: boolean) => void;
|
|
}) {
|
|
return (
|
|
<section className="resolution-choice" aria-labelledby="resolution-question" aria-busy={busy}>
|
|
<span className="section-kicker">Your answer is needed</span>
|
|
<h2 id="resolution-question">Is it fixed?</h2>
|
|
<p>{title}</p>
|
|
<p>Try the affected content in Grizzlyflix, then choose:</p>
|
|
<div className="resolution-choice-buttons">
|
|
<button id="yes" type="button" className="resolution-yes" disabled={busy} onClick={() => onAnswer(true)}>
|
|
<strong>YES</strong>
|
|
<span>It works — close this issue</span>
|
|
</button>
|
|
<button id="no" type="button" className="resolution-no" disabled={busy} onClick={() => onAnswer(false)}>
|
|
<strong>NO</strong>
|
|
<span>Still broken — keep it open</span>
|
|
</button>
|
|
</div>
|
|
{busy && <p role="status">Saving your answer…</p>}
|
|
</section>
|
|
);
|
|
}
|