feat: implement a level pill

this clsoes #248

src/component/_dumb/pill/index.js

@@ -0,0 +1 @@
+export { default } from './pill.component'

src/component/_dumb/pill/pill.component.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StyledPillHalf, StyledPill } from './pill.style'
+
+const Pill = ({ label, value }) => {
+  return (
+    <StyledPill>
+      <StyledPillHalf>{label}</StyledPillHalf>
+      <StyledPillHalf value={value}>{value}</StyledPillHalf>
+    </StyledPill>
+  )
+}
+
+export default Pill

src/component/_dumb/pill/pill.style.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+const colorMap = {
+  starter: '#c00',
+  junior: '#036',
+  mid: '#f00',
+  senior: '#0f0',
+}
+
+export const StyledPillHalf = styled.span`
+  flex-basis: 50%;
+  padding: 0.2rem 0.5rem;
+
+  &:first-child {
+    background-color: #fff;
+    color: #000;
+  }
+
+  &:last-child {
+    background-color: ${({ value }) => colorMap[value]};
+    color: #fff;
+    text-transform: capitalize;
+  }
+`
+
+export const StyledPill = styled.span`
+  display: flex;
+  align-items: center;
+  border-radius: 1rem;
+  overflow: hidden;
+`

src/component/course/course.schema.js

@@ -24,7 +24,7 @@ export default {
       placeholder: 'Select difficulty',
       label: 'Level of knowledge required to uderstand the course',
       defaultValue: '',
-      optionList: ["starter", "junior", "mid", "senior"],
+      optionList: ['', 'starter', 'junior', 'mid', 'senior'],
       edit: true,
       visible: true,
       value: ''

src/component/home/home.component.jsx

@@ -3,7 +3,8 @@ import HeaderTitle from '../_dumb/header-title';
 import { db } from '../data/firebase';
 import { debounce } from 'lodash'
 import { navigate } from '@reach/router'
-import { StyledCourse, StyledCourseList, StyledWatchNow } from './home.style';
+import { StyledCourse, StyledCourseList, StyledWatchNow, StyledButtonWrapper } from './home.style';
+import Pill from '../_dumb/pill';
 
 const Home = () => {
   const [pageY, setPageY] = useState(0)
@@ -43,14 +44,18 @@ const Home = () => {
   }
 
   const renderCourseList = () => {
-    return data.courseList.map(({ title, id, description, totalDuration, externalThumbnail }) => (
+    return data.courseList.map(({ title, id, description, totalDuration, externalThumbnail, courseLevel }) => (
       <StyledCourse key={id} externalThumbnail={externalThumbnail}>
         <HeaderTitle text={title} tag="h2" fontSize="1.2rem" />
         <p>{description}</p>
-        <div>Watch time: {totalDuration}</div>
-        <StyledWatchNow
-          onClick={() => goToCoursePlayList(id)}
-        >Watch now</StyledWatchNow>
+        <div>Duration: {totalDuration}</div>
+        <StyledButtonWrapper>
+
+          <StyledWatchNow
+            onClick={() => goToCoursePlayList(id)}
+          >Watch now</StyledWatchNow>
+          {courseLevel && <Pill label="Level" value={courseLevel} />}
+        </StyledButtonWrapper>
       </StyledCourse>
     ));
   };

src/component/home/home.style.js

@@ -5,6 +5,11 @@ export const StyledCourseList = styled.div `
   flex-wrap: wrap;
 `
 
+export const StyledButtonWrapper = styled.div `
+  display: flex;
+  justify-content: space-around;
+`
+
 export const StyledWatchNow = styled.button `
   background-color: #d52027;
   color: #fff;