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 className={styles.container}>
      <time dateTime={props.date.toISOString()}>{date}</time>
      {separator}
      <span>{time}</span>
      {separator}
      {location}
    </div>
  );
}