feat: create an Agenda component to list sessions

newrelic · Sep 4, 2020 · 0d1cf9e · 0d1cf9e
1 parent 1b4d48d
commit 0d1cf9e
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 2 deletions.
diff --git a/src/components/Agenda/Agenda.js b/src/components/Agenda/Agenda.js
@@ -0,0 +1,60 @@
+import React, { Children, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import Heading from './Heading';
+import Session from './Session';
+import Time from './Time';
+
+const Agenda = ({ children, className, tracks }) => {
+  const childrenArray = Children.toArray(children);
+
+  const sessionsByTime = childrenArray
+    .filter((child) => child.type === Session)
+    .reduce((memo, child) => {
+      const { time } = child.props;
+
+      return memo.set(
+        time,
+        memo.has(time) ? [...memo.get(time), child] : [child]
+      );
+    }, new Map());
+
+  return (
+    <div
+      className={className}
+      css={css`
+        display: grid;
+        grid-template-columns: 0.75fr repeat(${tracks.length}, 1fr);
+      `}
+    >
+      <Heading
+        css={css`
+          grid-column-start: 2;
+        `}
+      >
+        {tracks[0]}
+      </Heading>
+
+      {tracks.slice(1).map((track) => (
+        <Heading key={track}>{track}</Heading>
+      ))}
+
+      {Array.from(sessionsByTime).map(([time, sessions]) => (
+        <Fragment key={time}>
+          <Time>{time}</Time>
+          {sessions}
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+Agenda.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  tracks: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+Agenda.Session = Session;
+
+export default Agenda;
diff --git a/src/components/Agenda/Cell.js b/src/components/Agenda/Cell.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+
+const Cell = styled.div`
+  padding: 1rem;
+  box-shadow: 0 0 0 1px var(--color-neutrals-400);
+  background-color: ${({ inactive }) =>
+    inactive ? 'var(--color-neutrals-100)' : '#fff'};
+
+  .dark-mode & {
+    background-color: ${({ inactive }) =>
+      inactive ? '#284049' : 'var(--color-dark-100)'};
+    box-shadow: 0 0 0 1px var(--color-dark-400);
+  }
+`;
+
+Cell.propTypes = {
+  inactive: PropTypes.bool,
+};
+
+export default Cell;
diff --git a/src/components/Agenda/Heading.js b/src/components/Agenda/Heading.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import Cell from './Cell';
+
+const Heading = ({ children, className }) => (
+  <Cell
+    inactive
+    as="h5"
+    className={className}
+    css={css`
+      color: var(--color-teal-600);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0.75rem;
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+
+      .dark-mode & {
+        color: #ade7ec;
+      }
+    `}
+  >
+    {children}
+  </Cell>
+);
+
+Heading.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Heading;
diff --git a/src/components/Agenda/Session.js b/src/components/Agenda/Session.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import Cell from './Cell';
+
+const Session = ({ inactive, time, speaker, title, span }) => (
+  <Cell
+    inactive={inactive}
+    css={css`
+      grid-column: span ${span};
+      text-align: center;
+    `}
+  >
+    <h4
+      css={css`
+        font-size: 1rem;
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+      `}
+    >
+      {title}
+    </h4>
+    <div
+      css={css`
+        display: block;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05rem;
+        font-weight: normal;
+        user-select: text;
+      `}
+    >
+      {speaker}
+    </div>
+  </Cell>
+);
+
+Session.propTypes = {
+  inactive: PropTypes.bool,
+  time: PropTypes.string,
+  speaker: PropTypes.string,
+  title: PropTypes.string,
+  span: PropTypes.number,
+};
+
+Session.defaultProps = {
+  span: 1,
+};
+
+export default Session;
diff --git a/src/components/Agenda/Time.js b/src/components/Agenda/Time.js
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import Cell from './Cell';
+
+const Time = styled(Cell)`
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  color: var(--heading-text-color);
+`;
+
+export default Time;
diff --git a/src/components/Agenda/index.js b/src/components/Agenda/index.js
@@ -0,0 +1 @@
+export { default } from './Agenda';
diff --git a/src/pages/nerd-days.js b/src/pages/nerd-days.js
@@ -21,6 +21,7 @@ import shapesIcon from '../images/nerd-days/icon-shapes.svg';
 import openSourceIcon from '../images/nerd-days/icon-open-source.svg';
 import HopinLogo from '../components/HopinLogo';
 import styled from '@emotion/styled';
+import Agenda from '../components/Agenda';
 
 const NerdDaysPage = () => {
   const {
@@ -351,7 +352,106 @@ const NerdDaysPage = () => {
               respective industries
             </SectionDescription>
 
-            <div className={cx(styles.agendaContainer)}>
+            <Agenda
+              className={cx(styles.agendaContainer)}
+              tracks={[
+                'Observability',
+                'Cloud migration',
+                'Open source',
+                'DevOps journey',
+                'Fundamentals',
+              ]}
+            >
+              <Agenda.Session
+                time="8:00 AM"
+                title="Welcome"
+                speaker="Jemiah Sius"
+                span={5}
+              />
+              <Agenda.Session
+                time="8:30 AM"
+                title="Building Better Apps"
+                speaker="Anita Baker"
+                span={2}
+              />
+              <Agenda.Session
+                time="8:30 AM"
+                title="Open DevOps"
+                speaker="Robert Parr"
+                span={2}
+              />
+              <Agenda.Session
+                time="8:30 AM"
+                title="NR 101"
+                speaker="Jeff Osborne"
+              />
+              <Agenda.Session
+                time="9:00 AM"
+                title="All seeing eye"
+                speaker="Dylan Hernandez"
+              />
+              <Agenda.Session
+                time="9:00 AM"
+                title="AWS Ops"
+                speaker="Celso Piña"
+              />
+              <Agenda.Session
+                time="9:00 AM"
+                title="Main v Master"
+                speaker="Jeff Osborne"
+              />
+              <Agenda.Session
+                time="9:00 AM"
+                title="DevOps Journey"
+                speaker="Jemiah Sius"
+                span={2}
+              />
+              <Agenda.Session
+                time="11:00 AM"
+                title="Is it down? Yes."
+                speaker="Dylan Hernandez"
+              />
+              <Agenda.Session
+                time="11:00 AM"
+                title="How much is too much?"
+                speaker="Natalia Lafourcade"
+                span={2}
+              />
+              <Agenda.Session
+                time="11:00 AM"
+                title="Monolith Magic"
+                speaker="John McGibbons"
+              />
+              <Agenda.Session
+                time="11:00 AM"
+                title="Debuggers"
+                speaker="Anita Baker"
+              />
+              <Agenda.Session
+                inactive
+                time="12:00 AM"
+                title="Lunch Break"
+                speaker="Music by DJ Mykael V"
+                span={5}
+              />
+              <Agenda.Session
+                time="1:30 PM"
+                title="Observability and You"
+                speaker="Natalia Lafourcade"
+                span={3}
+              />
+              <Agenda.Session
+                time="1:30 PM"
+                title="COVID Productivity"
+                speaker="Celso Piña"
+                span={2}
+              />
+              <Agenda.Session
+                time="2:30 PM"
+                title="Closing + Swag"
+                speaker="Jemiah Sius and Team"
+                span={5}
+              />
               <div className={cx(styles.agendaHeaderRow)}>
                 <h5
                   className={cx(
@@ -668,7 +768,7 @@ const NerdDaysPage = () => {
                   </ul>
                 </h4>
               </div>
-            </div>
+            </Agenda>
           </Section>
 
           <Section

diff --git a/src/pages/nerd-days.module.scss b/src/pages/nerd-days.module.scss
@@ -9,6 +9,7 @@
   display: grid;
   grid-template-columns: 0.75fr repeat(5, 1fr);
   grid-template-areas: '. header1 header2 header3 header4 header5';
+  grid-column: span 6;
 }
 
 .agendaHeaderRowHeading {
@@ -51,6 +52,7 @@
 .agendaRow {
   display: grid;
   grid-template-columns: 0.75fr repeat(5, 1fr);
+  grid-column: span 6;
 }
 
 .agendaSession {