38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import type { CrosswordResponse } from "@/lib/types";
|
|
|
|
type ClueListProps = {
|
|
crossword: CrosswordResponse;
|
|
labels: {
|
|
across: string;
|
|
down: string;
|
|
};
|
|
};
|
|
|
|
export function ClueList({ crossword, labels }: ClueListProps) {
|
|
return (
|
|
<div className="clue-list">
|
|
<section className="clue-section">
|
|
<h3>{labels.across}</h3>
|
|
<ul className="clue-section__list">
|
|
{crossword.clues.across.map((clue) => (
|
|
<li className="clue-item" key={clue.entry_id}>
|
|
<strong>{clue.number}.</strong> {clue.text} <span className="muted">({clue.enumeration})</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="clue-section">
|
|
<h3>{labels.down}</h3>
|
|
<ul className="clue-section__list">
|
|
{crossword.clues.down.map((clue) => (
|
|
<li className="clue-item" key={clue.entry_id}>
|
|
<strong>{clue.number}.</strong> {clue.text} <span className="muted">({clue.enumeration})</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|