www-new/components/EventSetting.tsx

import React from "react";

import styles from "./EventSetting.module.css";

interface Props {
  date: Date;
  online: boolean;
  location: string;
}

export function EventSetting(props: Props) {
  const date = props.date.toLocaleDateString("en-US", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });
  const time = props.date.toLocaleTimeString("en-US", {
    hour: "numeric",
    minute: "numeric",
    timeZoneName: "short",
  });
  const location = props.online ? `Online - ${props.location}` : props.location;
  const separator = <span className={styles.separator}> | </span>;

  return (
    <div>
      <time className={styles.setting} dateTime={props.date.toISOString()}>
        {date}
      </time>
      {separator}
      <span className={styles.setting}>{time}</span>
      {separator}
      {location}
    </div>
  );
}