Merge pull request #32 from brajabi/abstract

feat: add Tags components

sections/Schedule.js

@@ -1,8 +1,10 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import ScheduleRow from 'components/ScheduleRow'
+import ScheduleTag from 'components/ScheduleTag'
 import SectionTitle from 'components/SectionTitle'
 import Container from 'components/Container'
+import { mobile } from 'utils/media'
 
 const styles = {
   keynote: {
@@ -23,6 +25,25 @@ const styles = {
   },
 }
 
+const colorTags = [
+  {
+    title: 'Keynote',
+    ...styles.keynote,
+  },
+  {
+    title: 'Breaks',
+    ...styles.break,
+  },
+  {
+    title: 'Lightning Talks',
+    ...styles.lightning,
+  },
+  {
+    title: 'Regular Talks',
+    ...styles.regular,
+  },
+]
+
 const scheduleList = [
   {
     title: 'Registration & Breakfast',
@@ -344,7 +365,12 @@ const scheduleList = [
 export default () => (
   <Wrapper id="schedule">
     <Container>
-      <SectionTitle>Schedule</SectionTitle>
+      <ScheduleHeader>
+        <SectionTitle>Schedule</SectionTitle>
+        <Tags>
+          {colorTags.map((row, i) => <ScheduleTag key={i} {...row} />)}
+        </Tags>
+      </ScheduleHeader>
       <List>
         {scheduleList.map((row, i) => <ScheduleRow key={i} {...row} />)}
       </List>
@@ -360,3 +386,24 @@ const Wrapper = styled.div`
 const List = styled.div`
   padding-top: 30px;
 `
+
+const ScheduleHeader = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  ${mobile(css`
+    flex-direction: column;
+  `)};
+`
+const Tags = styled.div`
+  flex-grow: 0;
+  display: flex;
+  justify-content: flex-end;
+  /* to cover extra margin on the right */
+  margin-right: -15px;
+
+  ${mobile(css`
+    justify-content: space-between;
+    flex-wrap: wrap;
+  `)};
+`