pagination added for automated answer

client/components/automated-answer-swiper/AutomatedAnswerSwiper.jsx

+import React, { useState } from 'react'
+import Pagination from '../pagination/Pagination'
+
+const AutomatedAnswerSwiper = ({ children }) => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const onBtnClick = (index) => {
+    console.log('here' + index)
+    if (index < children.length) {
+      setCurrentIndex(index)
+    }
+  }
+
+  return (
+    <div className="automated">
+      <Pagination
+        currentIndex={currentIndex}
+        length={children.length}
+        onBtnClick={onBtnClick}
+        onClickFirst={() => setCurrentIndex(0)}
+        onClickLast={() => setCurrentIndex(children.length - 1)}
+      />
+      {children[currentIndex]}
+    </div>
+  )
+}
+
+export default AutomatedAnswerSwiper

client/components/pagination/Pagination.jsx

+import React from 'react'
+import styles from './Pagination.module.css'
+
+const Pagination = ({
+  currentIndex,
+  length,
+  onBtnClick,
+  onClickFirst,
+  onClickLast
+}) => {
+  return (
+    <div className={styles.pagination_wrapper}>
+      <span onClick={onClickFirst} className={styles.cursor}>
+        first
+      </span>
+      <div className={styles.numbering}>
+        {new Array(length).fill(0).map((item, index) => {
+          return (
+            <span
+              className={
+                index == currentIndex
+                  ? styles.active_number
+                  : styles.muted_number
+              }
+              key={index}
+              onClick={() => onBtnClick(index)}
+            >
+              {index + 1}
+            </span>
+          )
+        })}
+        {/* <span className={styles.active_number}>{currentIndex + 1}</span>/
+        <span className={styles.muted_number}>{length}</span> */}
+      </div>
+      <span onClick={onClickLast} className={styles.cursor}>
+        last
+      </span>
+    </div>
+  )
+}
+
+export default Pagination

client/components/pagination/Pagination.module.css

+.pagination_wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.numbering {
+  color: #999;
+  * {
+    margin: 0 2px;
+    cursor: pointer;
+  }
+}
+
+.active_number {
+  color: #fff;
+  padding: 2px 10px;
+  background-color: #13ff625c;
+  border: 1px solid #78ff78;
+}
+
+.muted_number {
+  color: #fff;
+  padding: 2px 10px;
+  background-color: #5d5d5d5c;
+  border: 1px solid #9c9c9c;
+}
+
+.cursor {
+  cursor: pointer;
+}

client/components/youtube-videos/YoutubeVideoWrapper.js

 import React from 'react'
+import AutomatedAnswerSwiper from '../automated-answer-swiper/AutomatedAnswerSwiper'
 import YoutubeVideo from './youtube-video/YoutubeVideo'
 import styles from './YoutubeVideoWrapper.module.css'
 const YoutubeVideoWrapper = ({ videos }) => {
@@ -9,9 +10,11 @@ const YoutubeVideoWrapper = ({ videos }) => {
         youtube
       </h1>
       <div className={styles.wrapper}>
-        {videos.map((video, index) => {
-          return <YoutubeVideo video={video} key={index} />
-        })}
+        <AutomatedAnswerSwiper>
+          {videos.map((video, index) => {
+            return <YoutubeVideo video={video} key={index} />
+          })}
+        </AutomatedAnswerSwiper>
       </div>
     </>
   )