day 5

src/components/LedStrip/Led.js

@@ -8,9 +8,7 @@ const Led = ({ color, position, connectionClass = '' }) => {
           backgroundColor: color,
         }}
         className="light"
-      >
-        {position}
-      </div>
+      ></div>
     </div>
   );
 };

src/components/LedStrip/Leds.js

@@ -1,12 +1,27 @@
 import React from 'react';
 import Strip from './Strip';
+import config from '../../config';
 
 const Leds = ({ leds }) => {
   return (
     <div id="leds">
       <Strip leds={leds} direction="left" />
       <Strip
-        leds={leds.slice(0, 2).map((l) => {
+        leds={leds.slice(0, 3).map((l) => {
+          return { ...l, color: '#00AA00' };
+        })}
+        direction="right-down"
+      />
+      <Strip leds={leds} direction="right" />
+      <Strip
+        leds={leds.slice(0, 3).map((l) => {
+          return { ...l, color: '#00AA00' };
+        })}
+        direction="left-down"
+      />
+      <Strip leds={leds} direction="left" />
+      <Strip
+        leds={leds.slice(0, 3).map((l) => {
           return { ...l, color: '#00AA00' };
         })}
         direction="right-down"

src/config.js

@@ -0,0 +1,6 @@
+const config = {
+  ledsHorizontal: 50,
+  ledsVertical: 3,
+};
+
+export default config;

src/index.css

@@ -5,21 +5,22 @@
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
-  width: 30px;
-  height: 30px;
+  width: 15px;
+  height: 15px;
 }
 
 /** this is the container that our led lives in **/
 .led {
   background-color: #f8fbd9;
   position: relative;
   border: solid black 1px;
-  width: 50px;
-  height: 50px;
+  width: 20px;
+  height: 20px;
 }
 #leds {
   position: relative;
   width: 1000px;
+  margin: 10px auto;
 }
 
 /** Strip controls a row of leds **/
@@ -34,5 +35,9 @@
 
 .strip.right-down {
   flex-direction: column;
-  margin-left: 950px;
+  margin-left: 980px;
+}
+
+.strip.left-down {
+  flex-direction: column;
 }

src/pages/Home.js

@@ -5,7 +5,7 @@ import { generateLeds } from '../leds';
 
 const Home = () => {
   const [currentFrameIndex, setCurrentFrameIndex] = useState(1);
-  const [numberLeds, setNumberLeds] = useState(20);
+  const [numberLeds, setNumberLeds] = useState(50);
   const [leds, setLeds] = useState(generateLeds(numberLeds));
 
   function setNumberOfLeds(e) {