hunk.code_window: import timezone from "dayjs/plugin/timezone";
   import toArray from "dayjs/plugin/toArray";
   import utc from "dayjs/plugin/utc";
   import { createEvent } from "ics";
   import { Person } from "@lib/calendarClient";
   import EventMail from "./EventMail";
   import { stripHtml } from "./helpers";
  
hunk.labels: keep keep keep replace keep keep keep keep keep
hunk.after_edit: import { createEvent, DateArray } from "ics";
  
hunk.file_path: lib/emails/EventOrganizerMail.ts
hunk.type: replace
file: import React from "react";
  
  import { HttpError } from "@lib/core/http/error";
  
  type Props = {
    statusCode?: number | null;
    error?: Error | HttpError | null;
    message?: string;
    /** Display debugging information */
    displayDebug?: boolean;
    children?: never;
  };
  
  const defaultProps = {
    displayDebug: false,
  };
  
  const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (props) => {
    const { error: e } = props;
  
    const debugMap = [
      ["error.message", e?.message],
      ["error.name", e?.name],
      ["error.class", e instanceof Error ? e.constructor.name : undefined],
      ["http.url", e instanceof HttpError ? e.url : undefined],
      ["http.status", e instanceof HttpError ? e.statusCode : undefined],
      ["http.cause", e instanceof HttpError ? e.cause?.message : undefined],
      ["error.stack", e instanceof Error ? e.stack : undefined],
    ];
  
    return (
      <div className="bg-white shadow overflow-hidden sm:rounded-lg">
        <div className="border-t border-gray-200 px-4 py-5 sm:p-0">
          <dl className="sm:divide-y sm:divide-gray-200">
            {debugMap.map(([key, value]) => {
              if (value !== undefined) {
                return (
                  <div key={key} className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt className="text-sm font-bold text-black">{key}</dt>
                    <dd className="mt-1 text-sm text-black sm:mt-0 sm:col-span-2">{value}</dd>
                  </div>
                );
              }
            })}
          </dl>
        </div>
      </div>
    );
  };
  
  export const ErrorPage: React.FC<Props> = (props) => {
    const { message, statusCode, error, displayDebug } = { ...defaultProps, ...props };
  
    return (
      <>
        <div className="bg-white min-h-screen px-4">
          <main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
            <div className="text-center">
              <p className="text-sm font-semibold text-black uppercase tracking-wide">{statusCode}</p>
              <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
                {message}
              </h1>
            </div>
          </main>
          {displayDebug && (
            <div className="flex-wrap">
              <ErrorDebugPanel error={error} />
            </div>
          )}
        </div>
      </>
    );
  };
  