51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { CrosswordResponse } from "@/lib/types";
|
|
|
|
type CrosswordAnswerKeyProps = {
|
|
crossword: CrosswordResponse;
|
|
labels: {
|
|
across: string;
|
|
down: string;
|
|
answer: string;
|
|
clue: string;
|
|
};
|
|
};
|
|
|
|
export function CrosswordAnswerKey({ crossword, labels }: CrosswordAnswerKeyProps) {
|
|
const acrossEntries = crossword.entries.filter((entry) => entry.direction === "across");
|
|
const downEntries = crossword.entries.filter((entry) => entry.direction === "down");
|
|
|
|
function renderEntries(entries: typeof acrossEntries) {
|
|
return (
|
|
<ol className="answer-key__list">
|
|
{entries.map((entry) => (
|
|
<li className="answer-key__item" key={entry.entry_id}>
|
|
<div className="answer-key__heading">
|
|
<strong>{entry.number}.</strong>
|
|
<span className="muted">{labels.answer}:</span>
|
|
<span className="answer-key__answer">{entry.answer}</span>
|
|
<span className="muted">({entry.answer_length})</span>
|
|
</div>
|
|
<p>
|
|
<strong>{labels.clue}:</strong> {entry.clue}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="answer-key">
|
|
<section className="answer-key__section">
|
|
<h3>{labels.across}</h3>
|
|
{renderEntries(acrossEntries)}
|
|
</section>
|
|
|
|
<section className="answer-key__section">
|
|
<h3>{labels.down}</h3>
|
|
{renderEntries(downEntries)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|