https://pressthink.org/j/rosen-archive/frontend/components/EasterEggNote.js?v=3.8.36

1import { html } from '../html.js?v=3.8.36';
2import { X } from 'lucide-react';
3
4/**
5 * One quiet, dismissible line above the results (#754).
6 *
7 * Both hidden notes use it: the dissertation-year note and the broken-record
8 * note. It is a note, not a dialog or a landmark: it never steals focus, never
9 * traps it, and two of them on one page cannot collide as duplicate landmarks.
10 * The close button is a full-size tap target like the announcement banner.
11 * The optional link points at the payoff.
12 */
13const EasterEggNote = ({ text, linkHref, linkLabel, onLink, onDismiss }) => {
14  if (!text) return null;
15
16  return html`
17    <div className="archive-notice archive-egg-note" role="note">
18      <p className="archive-egg-note__line">${text}</p>
19      ${linkHref && linkLabel && html`
20        <a
21          href=${linkHref}
22          className="archive-egg-note__link"
23          onClick=${(event) => {
24            if (!onLink) return;
25            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
26            event.preventDefault();
27            onLink();
28          }}
29        >${linkLabel}</a>
30      `}
31      <button
32        type="button"
33        onClick=${onDismiss}
34        className="archive-action archive-action--quiet archive-egg-note__close flex items-center justify-center p-3"
35        aria-label="Dismiss note"
36      >
37        <${X} className="w-5 h-5" aria-hidden="true" />
38      </button>
39    </div>
40  `;
41};
42
43export default EasterEggNote;