Youtube Video showcase added, Stackoverflow answer improved

client/components/automated-answer/index.js

 import React from 'react'
 import StackOverflowAnswer from '../stof-answer'
+import YoutubeVideoWrapper from '../youtube-videos/YoutubeVideoWrapper'
 
 const AutomatedAnswer = ({ automatedAnswer }) => {
   console.log(automatedAnswer)
@@ -10,6 +11,13 @@ const AutomatedAnswer = ({ automatedAnswer }) => {
       ) : (
         <h1>No Stack overflow</h1>
       )}
+
+      {automatedAnswer.youtube != null &&
+      automatedAnswer.youtube.length >= 1 ? (
+        <YoutubeVideoWrapper videos={automatedAnswer.youtube} />
+      ) : (
+        <h1>No youtubes found for this question</h1>
+      )}
     </>
   )
 }

client/components/stof-answer/index.js

@@ -7,7 +7,9 @@ const StackOverflowAnswer = ({ stof }) => {
   }
   return (
     <>
-      <h1 className={styles.h}>Answer from Stackoverflow - {stof.status}</h1>
+      <h1 className={styles.h}>
+        I found {stof.status} answer on Stackoverflow
+      </h1>
       <div className={styles.wrapper}>
         <div dangerouslySetInnerHTML={createMarkup()}></div>
       </div>

client/components/stof-answer/stof-answer.module.css

@@ -5,8 +5,10 @@
   padding: 0.8em;
   border-radius: 10px;
   font-family: 'Open Sans', sans-serif;
+  margin-bottom: 3em;
+  color: white;
 }
 
 .h {
-  font-size: 1.3em !important;
+  font-size: 2em !important;
 }

client/components/youtube-videos/YoutubeVideoWrapper.js

+import React from 'react'
+import YoutubeVideo from './youtube-video/YoutubeVideo'
+import styles from './YoutubeVideoWrapper.module.css'
+const YoutubeVideoWrapper = ({ videos }) => {
+  return (
+    <>
+      <h1 className={styles.h1}>
+        Here are {videos.length} video{videos.length > 1 && 's'} I found on
+        youtube
+      </h1>
+      <div className={styles.wrapper}>
+        {videos.map((video, index) => {
+          return <YoutubeVideo video={video} key={index} />
+        })}
+      </div>
+    </>
+  )
+}
+
+export default YoutubeVideoWrapper

client/components/youtube-videos/YoutubeVideoWrapper.module.css

+.wrapper {
+  margin-top: 0.5em;
+  background-color: #2d2d2d;
+  padding: 0.8em;
+  border-radius: 2px;
+  margin-bottom: 3em;
+}
+.h1 {
+  font-size: 2em !important;
+}

client/components/youtube-videos/youtube-video/YoutubeVideo.js

+import React from 'react'
+import styles from './YoutubeVideo.module.css'
+const YoutubeVideo = ({ video }) => {
+  console.log(video.substring(32, video.length - 1))
+  return (
+    <div className={styles.video_responsive}>
+      <iframe
+        width="853"
+        height="480"
+        src={`https://youtube.com/embed/${video.substring(32, video.length)}`}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        title="Embedded youtube"
+      />
+    </div>
+  )
+}
+
+export default YoutubeVideo

client/components/youtube-videos/youtube-video/YoutubeVideo.module.css

+.video_responsive {
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  position: relative;
+  height: 0;
+  margin: 1em 0;
+
+  iframe {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+}

client/styles/automatedanswer.css

@@ -4,7 +4,7 @@
   line-height: 1.5em;
   word-break: break-word;
   font-size: 15px;
-
+  color: white;
   a {
     text-decoration: underline;
     color: var(--blue-300);
@@ -43,6 +43,13 @@
       margin-top: 0.6em;
     }
   }
+
+  h2 {
+    color: white !important;
+    font-weight: bold !important;
+    font-size: 1.4em !important;
+    margin: 1.6em 0 0.7em 0;
+  }
 }
 
 .s-prose *:not(.s-code-block) > code {
@@ -65,3 +72,40 @@ sup {
 sub {
   vertical-align: sub;
 }
+
+.s-table-container {
+  /* margin-bottom: 1.1em; */
+  overflow-x: auto;
+}
+
+.s-table {
+  display: table;
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: 13px;
+}
+
+.s-table thead th {
+  vertical-align: bottom;
+  white-space: nowrap;
+  background-color: var(--black-600);
+  line-height: 1.15384615;
+}
+
+.s-table th {
+  font-weight: bold;
+  color: var(--fc-dark);
+}
+
+.s-table th,
+.s-table td {
+  padding: 8px;
+  border-top: 1px solid var(--black-100);
+  border-left: 1px solid var(--black-100);
+  border-right: 1px solid var(--black-100);
+  vertical-align: middle;
+  color: var(--fc-medium);
+  text-align: left;
+}