alpha01 filetti: web app, crossword service and tor batch

webapp/components/crossword-answer-key.tsx

@@ -0,0 +1,50 @@
+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>
+  );
+}