feat: add colors to sections in home page

codetapacademy · Sep 7, 2019 · 3122e89 · 3122e89
1 parent 5c0a233
commit 3122e89
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/src/component/lecture-info/lecture-info.component.jsx b/src/component/lecture-info/lecture-info.component.jsx
@@ -3,14 +3,11 @@ import HeaderTitle from '../_dumb/header-title';
 import ResponsiveThumbnail from '../_dumb/responsive-thumbnail';
 import { StyledLectureInfo } from './lecture-info.style';
 
-const LectureInfo = ({ title, id, description, imagePath, youtubeVideoId, youtubePlaylistId }) => {
+const LectureInfo = ({ title, id, description, imagePath, youtubeVideoId, sectionOrder }) => {
   const getImagePath = () =>
     imagePath ? imagePath : `http://img.youtube.com/vi/${youtubeVideoId}/0.jpg`;
   const getYoutubePath = () => `/video/${youtubeVideoId}`;
 
-  // TODO: use this later on when linking to youtube
-  // `https://www.youtube.com/watch?v=${youtubeVideoId}&list=${youtubePlaylistId}&t=0s`;
-
   const headerTitlePropList = {
     text: title,
     tag: 'a',
@@ -19,7 +16,7 @@ const LectureInfo = ({ title, id, description, imagePath, youtubeVideoId, youtub
   };
 
   return (
-    <StyledLectureInfo>
+    <StyledLectureInfo sectionOrder={sectionOrder}>
       <div>
         <ResponsiveThumbnail imagePath={getImagePath()} />
       </div>

diff --git a/src/component/lecture-info/lecture-info.style.js b/src/component/lecture-info/lecture-info.style.js
@@ -1,6 +1,31 @@
 import styled from 'styled-components'
+const colorList = [
+  "#1abc9c",
+  "#2ecc71",
+  "#3498db",
+  "#9b59b6",
+  "#34495e",
+  "#16a085",
+  "#27ae60",
+  "#2980b9",
+  "#8e44ad",
+  "#2c3e50",
+  // "#f1c40f",
+  "#e67e22",
+  "#e74c3c",
+  // "#ecf0f1",
+  "#95a5a6",
+  "#f39c12",
+  "#d35400",
+  "#c0392b",
+  // "#bdc3c7",
+  "#7f8c8d"
+].sort((a, b) => Math.random() - 0.5)
 
 export const StyledLectureInfo = styled.div`
   width: 220px;
-  padding: 6px 12px 6px 0;
+  padding: 6px;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  background-color: ${({ sectionOrder }) => colorList[sectionOrder]}
 `
diff --git a/src/component/lecture-slider/lecture-slider.component.jsx b/src/component/lecture-slider/lecture-slider.component.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import LectureInfo from '../lecture-info';
 import { StyledLectureSlider } from './lecture-slider.style';
 
@@ -7,15 +7,21 @@ const LectureSlider = ({ lectureList, courseId, youtubePlaylistId, sectionList }
     <StyledLectureSlider>
       {sectionList.map(section => {
         return (
-          <div key={section.id}>
-            <div>{section.title}</div>
+          <Fragment key={section.id}>
             {
               lectureList
                 .filter(lecture => lecture.section.id === section.id)
                 .sort((a, b) => a.order - b.order)
-                .map(({ id, ...lecture }) => <LectureInfo key={id} {...lecture} youtubePlaylistId={youtubePlaylistId} />)
+                .map(({ id, ...lecture }) => (
+                  <LectureInfo
+                    key={id}
+                    {...lecture}
+                    sectionOrder={section.order}
+                    youtubePlaylistId={youtubePlaylistId}
+                  />
+                ))
             }
-          </div>
+          </Fragment>
         )
       })}
     </StyledLectureSlider>