add circles to notes-of-love section

Relates #67
fac-17 · Oct 10, 2019 · 7cac110 · 7cac110
1 parent 03fd6fe
commit 7cac110
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/components/NotesOfLove/NotesOfLove.css b/src/components/NotesOfLove/NotesOfLove.css
@@ -16,10 +16,33 @@
 
 .notes-of-love__image__active{
   display: inline-block;
-  width: 80%;
+  width: auto;
+  height: 40vh;
 
 }
 
 .my-appointment__container{
   height: 100vh;
 }
+
+.notes-of-love__circle__container{
+  margin-top: 0.3em;
+}
+
+.notes-of-love__circle{
+margin: 0.1em;
+height: 0.5em;
+width: 0.5em;
+background-color: #bbb;
+border-radius: 50%;
+display: inline-block;
+}
+
+.notes-of-love__circle__active{
+  margin: 0.1em;
+  height: 0.5em;
+  width: 0.5em;
+  background-color: #614870;
+  border-radius: 50%;
+  display: inline-block;
+}
diff --git a/src/components/NotesOfLove/NotesOfLove.js b/src/components/NotesOfLove/NotesOfLove.js
@@ -17,6 +17,7 @@ const NotesOfLove = () => {
 const [index, setIndex] = React.useState(0);
 
 const imageArray = [ noteOne, noteTwo, noteThree, noteFour, noteFive, noteSix, noteSeven ];
+const circleArray = [1, 2, 3, 4, 5, 6, 7];
 
 const swipeLeft = () => {
   index < 6 ? setIndex(index + 1) : setIndex(index);
@@ -38,6 +39,13 @@ const swipeRight = () => {
     </div>
   ))}
   </Swipeable>
+  <div class="notes-of-love__circle__container">
+{circleArray.map( (circle, i) =>
+  <span
+  className={i == index ? "notes-of-love__circle__active" : "notes-of-love__circle"}>
+  </span>
+ )}
+  </div>
 <Menu />
 </section>
 )