<commit_before>import Link from "next/link";
import { DateTime } from "luxon";
import { DateRange } from "../components/Snippets";
import {
  generateDisplayDate,
  generateRealtimeDate,
} from "@urbit/foundation-design-system";
import classNames from "classnames";

export default function EventPreview({ event, className, big }) {
  // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
  const grayText = event?.dark ? "text-white dark:text-black" : "text-wall-400";
  const blackText = event?.dark
    ? "text-white dark:text-black"
    : "text-wall-600";

  const starts = generateDisplayDate(event.starts, event.timezone);
  const ends = generateDisplayDate(event.ends, event.timezone);

  const inFuture = generateRealtimeDate(starts) > DateTime.now();

  const happeningNow =
    generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;

  return (
    <div className={`cursor-pointer h-full ${className}`}>
      <div
        key={event.slug}
        className={`bg-wall-100 min-h-[320px] h-full flex flex-col rounded-xl bg-cover bg-center bg-no-repeat `}
        style={{ backgroundImage: `url(${event.image})` || "" }}
      >
        <Link href={`/events/${event.slug}`}>
          <div
            className={classNames(
              "flex flex-col p-6 min-h-[320px] justify-between items-between h-full relative",
              {
                "backdrop-brightness-50 rounded-xl": Boolean(
                  event?.darken_image
                ),
              }
            )}
          >
            <div
              className={`grow-1 flex ${
                big ? "justify-center" : ""
              } flex-col h-full`}
            >
              <h3 className={`${blackText} mb-2`}>{event.title}</h3>
              <p className={blackText + " truncate text-sm"}>
                {event.description}
              </p>
            </div>

            <div className="flex justify-between items-end">
              <div className="">
                <p className={`${blackText} type-sub mb-1`}>{event.location}</p>
                <DateRange
                  starts={starts}
                  ends={ends}
                  className={`${grayText} type-sub`}
                />
              </div>

              {inFuture && event.registration_url ? (
                <div>
                  <a
                    className="button-sm bg-green-400 text-white"
                    href={event.registration_url}
                    onClick={(e) => e.stopPropagation()}
                    target="_blank"
                  >
                    RSVP
                  </a>
                </div>
              ) : event.youtube ? (
                <div className="shrink-0">
                  <a
                    className="button-sm bg-wall-600 text-white shrink-0"
                    href={`https://www.youtube.com/watch?v=${event.youtube}`}
                    onClick={(e) => e.stopPropagation()}
                    target="_blank"
                  >
                    ▶ Watch
                  </a>
                </div>
              ) : null}
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}
<commit_msg>components: add id to EventPreview header<commit_after>import Link from "next/link";
import { DateTime } from "luxon";
import { DateRange } from "../components/Snippets";
import {
  generateDisplayDate,
  generateRealtimeDate,
} from "@urbit/foundation-design-system";
import classNames from "classnames";

export default function EventPreview({ event, className, big }) {
  // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
  const grayText = event?.dark ? "text-white dark:text-black" : "text-wall-400";
  const blackText = event?.dark
    ? "text-white dark:text-black"
    : "text-wall-600";

  const starts = generateDisplayDate(event.starts, event.timezone);
  const ends = generateDisplayDate(event.ends, event.timezone);

  const inFuture = generateRealtimeDate(starts) > DateTime.now();

  const happeningNow =
    generateRealtimeDate(event.starts) > DateTime.now() && !inFuture;

  return (
    <div className={`cursor-pointer h-full ${className}`}>
      <div
        key={event.slug}
        className={`bg-wall-100 min-h-[320px] h-full flex flex-col rounded-xl bg-cover bg-center bg-no-repeat `}
        style={{ backgroundImage: `url(${event.image})` || "" }}
      >
        <Link href={`/events/${event.slug}`}>
          <div
            className={classNames(
              "flex flex-col p-6 min-h-[320px] justify-between items-between h-full relative",
              {
                "backdrop-brightness-50 rounded-xl": Boolean(
                  event?.darken_image
                ),
              }
            )}
          >
            <div
              className={`grow-1 flex ${big ? "justify-center" : ""
                } flex-col h-full`}
            >
              <h3 className={`${blackText} mb-2`} id={event.title}>{event.title}</h3>
              <p className={blackText + " truncate text-sm"}>
                {event.description}
              </p>
            </div>

            <div className="flex justify-between items-end">
              <div className="">
                <p className={`${blackText} type-sub mb-1`}>{event.location}</p>
                <DateRange
                  starts={starts}
                  ends={ends}
                  className={`${grayText} type-sub`}
                />
              </div>

              {inFuture && event.registration_url ? (
                <div>
                  <a
                    className="button-sm bg-green-400 text-white"
                    href={event.registration_url}
                    onClick={(e) => e.stopPropagation()}
                    target="_blank"
                  >
                    RSVP
                  </a>
                </div>
              ) : event.youtube ? (
                <div className="shrink-0">
                  <a
                    className="button-sm bg-wall-600 text-white shrink-0"
                    href={`https://www.youtube.com/watch?v=${event.youtube}`}
                    onClick={(e) => e.stopPropagation()}
                    target="_blank"
                  >
                    ▶ Watch
                  </a>
                </div>
              ) : null}
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}

{'fraction_non_alphanumeric': 0.1342620943049602, 'fraction_numerical': 0.009491733006736069, 'mean_word_length': 1.5117262591311034, 'pattern_counts': {'":': 2, '<': 61, '<?xml version=': 0, '>': 69, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5185881', 'n_tokens_mistral': 1862, 'n_tokens_neox': 1763, 'n_words': 368}