💄 TBD dates

api/events.js

@@ -10,6 +10,8 @@ import { getDataFromMD } from '../common/api'
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
+const TBD = 'TBD'
+
 export const getEvents = () => {
   const eventFiles = fs.readdirSync('content/events')
 
@@ -62,7 +64,7 @@ const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
   // Start time
   let formattedStartTime = {}
 
-  if (startTime) {
+  if (startTime && startTime !== TBD) {
     const [startHour, startMinute] = startTime.split(':')
 
     const UTCStartTime = UTCDate.hour(startHour).minute(startMinute)
@@ -80,7 +82,7 @@ const formatEventDateTime = (date = dayjs.utc(), startTime, endTime) => {
   // End time
   let formattedEndTime = {}
 
-  if (endTime) {
+  if (endTime && endTime !== TBD) {
     const [endHour, endMinute] = endTime.split(':')
 
     const UTCEndTime = UTCDate.hour(endHour).minute(endMinute)

components/date-time-chip/DateTimeChip.jsx

@@ -1,11 +1,17 @@
 import { getLiteral } from '../../common/i18n'
+import IconClock from '../../public/icons/clock'
 
 const DateTimeChip = ({ startTime, endTime }) => {
   return (
     <div className="datetime-chip">
       {startTime ? (
         <p className="datetime-chip__time">
-          {startTime.utc} - {endTime.utc}
+          <span className="datetime-chip__icon">
+            <IconClock />
+          </span>
+          {startTime.utc && endTime.utc
+            ? `${startTime.utc} - ${endTime.utc}`
+            : getLiteral('message:tbd')}
           <span className="datetime-chip__timezone">
             {getLiteral('timezone:utc')}
           </span>
@@ -14,7 +20,12 @@ const DateTimeChip = ({ startTime, endTime }) => {
 
       {endTime ? (
         <p className="datetime-chip__time">
-          {startTime.pt} - {endTime.pt}
+          <span className="datetime-chip__icon">
+            <IconClock />
+          </span>
+          {startTime.pt && endTime.pt
+            ? `${startTime.pt} - ${endTime.pt}`
+            : getLiteral('message:tbd')}
           <span className="datetime-chip__timezone">
             {getLiteral('timezone:pt')}
           </span>

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

@@ -4,6 +4,8 @@
 
   &__time {
     position: relative;
+    display: flex;
+    align-items: center;
 
     &:not(:last-child) {
       margin-bottom: spacing(1.5)
@@ -19,4 +21,8 @@
 
     color: $white-80;
   }
+
+  &__icon {
+    margin-right: spacing(1);
+  }
 }

content/commons.json

@@ -34,6 +34,8 @@
 
     "meta:title": "Maintainer Month",
     "meta:description": "Maintainer Month Description",
+
+    "message:tbd": "TBD",
     
     "navigation:schedule": "Schedule",
     "navigation:library": "Library",

content/events/event2.md

@@ -3,8 +3,8 @@ title: 'Second event title with long text'
 metaTitle: 'Second event title with long text'
 metaDesc: '(Description)This is an open source initiative to bookmark a week to collectively contemplate open source maintainership, whatever form that takes. Various organizations, projects, and companies will be running'
 date: '01/15'
-UTCStartTime: '14:00'
-UTCEndTime: '22:00'
+UTCStartTime: 'TBD'
+UTCEndTime: 'TBD'
 type: 'podcast'
 userName: 'github'
 userLink: 'github'

public/icons/clock.js

@@ -0,0 +1,25 @@
+const IconClock = () => {
+  return (
+    <svg
+      className="icon-clock"
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.33317 5.33329C8.33317 5.05715 8.10931 4.83329 7.83317 4.83329C7.55703 4.83329 7.33317 5.05715 7.33317 5.33329V8.99996C7.33317 9.17939 7.42931 9.34506 7.5851 9.43408L9.91843 10.7674C10.1582 10.9044 10.4636 10.8211 10.6006 10.5814C10.7376 10.3416 10.6543 10.0362 10.4146 9.89917L8.33317 8.7098V5.33329Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99984 1.16663C3.94975 1.16663 0.666504 4.44987 0.666504 8.49996C0.666504 12.55 3.94975 15.8333 7.99984 15.8333C12.0499 15.8333 15.3332 12.55 15.3332 8.49996C15.3332 4.44987 12.0499 1.16663 7.99984 1.16663ZM1.6665 8.49996C1.6665 5.00216 4.50203 2.16663 7.99984 2.16663C11.4976 2.16663 14.3332 5.00216 14.3332 8.49996C14.3332 11.9978 11.4976 14.8333 7.99984 14.8333C4.50203 14.8333 1.6665 11.9978 1.6665 8.49996Z"
+        fill="white"
+      />
+    </svg>
+  )
+}
+
+export default IconClock