website/_components/header.tsx

export interface Props {
  title: string;
  description?: string;
  author?: {
    name: string;
  };
  date: Date;
  comp: any;
}

export default function (props: Props) {
  const dateFormatted = Intl.DateTimeFormat("en-CA", { dateStyle: "long" })
    .format(props.date);
  return (
    <header className="page-header">
      <h1>{props.title}</h1>
      {props.author &&
        (
          <p className="author" style={{ color: "var(--color-brown)" }}>
            By {props.author.name} on{" "}
            <time dateTime={props.date.toISOString()}>{dateFormatted}</time>
          </p>
        )}
      <p className="subheading">{props.description}</p>
      {props.comp.separator()}
    </header>
  );
}