alpha01 filetti: web app, crossword service and tor batch

webapp/components/clue-list.tsx

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