💄 DateTime chip

components/date-time-chip/DateTimeChip.jsx

@@ -0,0 +1,33 @@
+import { getLiteral } from '../../common/i18n'
+
+import useDateTime from './useDateTime'
+
+const DateTimeChip = ({ date, startTime, endTime }) => {
+  const formattedDateTime = useDateTime(date, startTime, endTime)
+
+  return (
+    <div className="datetime-chip">
+      <p className="datetime-chip__date">
+        <span>{formattedDateTime.date}</span>
+      </p>
+
+      <p className="datetime-chip__time">
+        {formattedDateTime.startTime.utc} - {formattedDateTime.endTime.utc}
+        <span className="datetime-chip__timezone">
+          {getLiteral('timezone:utc')}
+        </span>
+      </p>
+
+      <div className="datetime-chip__divider" />
+
+      <p className="datetime-chip__time">
+        {formattedDateTime.startTime.pt} - {formattedDateTime.endTime.pt}
+        <span className="datetime-chip__timezone">
+          {getLiteral('timezone:pt')}
+        </span>
+      </p>
+    </div>
+  )
+}
+
+export default DateTimeChip

components/date-time-chip/date-time-chip.scss

@@ -0,0 +1,54 @@
+.datetime-chip {
+  display: inline-flex;
+
+  outline: 1px solid $white-soft;
+  border-radius: 27px;
+
+  @extend %subtitle-1;
+
+  &__date {
+    padding: spacing(1) spacing(1.5);
+    background: $white;
+    color: $purple;
+
+    outline: 1px solid $white;
+    border-radius: 27px;
+
+    box-sizing: border-box;
+  }
+
+  &__time {
+    padding: spacing(1) spacing(1.5);
+
+    border-radius: 27px;
+
+    position: relative;
+  }
+
+  &__timezone {
+    margin-left: spacing(1);
+
+    font-weight: $medium;
+    font-size: 12px;
+    line-height: 1.6;
+
+    color: $white-soft;
+  }
+
+  &__divider {
+    width: 4px;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: calc(50% - 2px);
+
+      height: 4px;
+      width: 4px;
+      background: $white;
+
+      border-radius: 50%;
+    }
+  }
+}

components/date-time-chip/useDateTime.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+
+import dayjs from 'dayjs'
+
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+const useDateTime = (date, startTime, endTime) => {
+  const formattedTime = useMemo(() => {
+    // Date
+    const UTCDate = dayjs.utc(date)
+    const formattedDate = UTCDate.format('MMM D')
+
+    // Start time
+    const [startHour, startMinute] = startTime.split(':')
+
+    const UTCStartTime = UTCDate.hour(startHour).minute(startMinute)
+    const PTStartTime = UTCStartTime.tz('America/Los_Angeles')
+
+    const formattedUTCStartTime = UTCStartTime.format('H:mm a')
+    const formattedPTStartTime = PTStartTime.format('H:mm a')
+
+    // End time
+    const [endHour, endMinute] = endTime.split(':')
+
+    const UTCEndTime = UTCDate.hour(endHour).minute(endMinute)
+    const PTEndTime = UTCStartTime.tz('America/Los_Angeles')
+
+    const formattedUTCEndTime = UTCEndTime.format('H:mm a')
+    const formattedPTEndTime = PTEndTime.format('H:mm a')
+
+    return {
+      date: formattedDate,
+      startTime: {
+        utc: formattedUTCStartTime,
+        pt: formattedPTStartTime,
+      },
+      endTime: {
+        utc: formattedUTCEndTime,
+        pt: formattedPTEndTime,
+      },
+    }
+  }, [date, endTime, startTime])
+
+  return formattedTime
+}
+
+export default useDateTime

components/event-detail/EventDetail.jsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import EventTypeChip from '../event-type-chip/EventTypeChip'
 
 import IconVideo from '../../public/icons/video'
+import DateTimeChip from '../date-time-chip/DateTimeChip'
 
 // TODO: title heading for SEO (titleComponent?)
 
@@ -16,9 +17,11 @@ const EventDetail = ({ event, reverseColumns }) => {
     <article className={classes}>
       <div className="event-detail__info">
         <EventTypeChip type={event.type} />
-        <p>{event.date}</p>
-        <p>{event.UTCEndTime}</p>
-        <p>{event.UTCStartTime}</p>
+        <DateTimeChip
+          date={event.date}
+          startTime={event.UTCStartTime}
+          endTime={event.UTCEndTime}
+        />
         <p className="event-detail__title">{event.title}</p>
         <div
           className="event-detail__text"

components/event-detail/event-detail.scss

@@ -4,12 +4,15 @@
   @extend %grid;
 
   &__title {
-    margin-bottom: spacing(4);
-
     @extend %header-2;
   }
 
   &__info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: spacing(4);
+
     grid-column: 1 / 4;
 
     @media (min-width: $md) {

content/commons.json

@@ -38,5 +38,8 @@
     "page:date": "June 2022",
 
     "schedule:title": "Schedule",
-    "schedule:description": "Schedule description"
+    "schedule:description": "Schedule description",
+
+    "timezone:utc": "UTC",
+    "timezone:pt": "PT"
 }

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "clsx": "^1.1.1",
+    "dayjs": "^1.11.0",
     "gray-matter": "^4.0.3",
     "markdown-it": "^12.3.2",
     "next": "12.1.0",

styles/styles.scss

@@ -8,6 +8,7 @@
 // Components
 @import '../components/button-link/button-link';
 @import '../components/chip/chip';
+@import '../components/date-time-chip/date-time-chip';
 @import '../components/event-detail/event-detail';
 @import '../components/footer/footer';
 @import '../components/header/header';

yarn.lock

@@ -404,6 +404,11 @@ damerau-levenshtein@^1.0.7:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+dayjs@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.0.tgz#009bf7ef2e2ea2d5db2e6583d2d39a4b5061e805"
+  integrity sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"