Automated answer ui wrapper/model created

client/components/automated-answer-container/automated-answer-container.module.css

+.container {
+  padding-top: 10px;
+  h2 {
+    font-size: 18px;
+    font-weight: 400;
+    color: var(--black-800);
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.fill {
+  flex: 1;
+}
+
+.spinner {
+  display: flex;
+  margin: auto;
+  height: 3em;
+  width: 3em;
+}
+
+.wrapper {
+  background-color: var(--black-800);
+  color: var(--white);
+  border-radius: 5px;
+  margin: 2rem 1rem 2rem 1rem;
+  padding: 1em 1em;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+}

client/components/automated-answer-container/index.js

+import React, { useEffect, useState } from 'react'
+import NoAutomatedAnswer from '../automated-answer/no-automated-answer'
+import { Spinner } from '../icons'
+
+import styles from './automated-answer-container.module.css'
+
+const AutomatedAnswerContainer = ({ question_id }) => {
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false)
+    }, 4000)
+    console.log(question_id)
+  }, [question_id])
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.fill}>
+          <h2>Automated Answer</h2>
+        </div>
+      </div>
+      <div className={styles.wrapper}>
+        {loading ? (
+          <Spinner className={styles.spinner} />
+        ) : (
+          <NoAutomatedAnswer question_id={question_id} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AutomatedAnswerContainer

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

+.container {
+  display: grid;
+  grid-template-rows: auto 1fr auto auto;
+  padding: 20px;
+  grid-gap: 10px;
+}
+
+.textarea {
+  height: 200px;
+}
+
+.status {
+  color: var(--red-500);
+  font-size: 12px;
+}

client/components/automated-answer/index.js

+import React from 'react'
+
+const AutomatedAnswer = ({ automatedAnswer }) => {
+  return (
+    <div>
+      <h1>Actual automated answer</h1>
+    </div>
+  )
+}
+
+export default AutomatedAnswer

client/components/automated-answer/no-automated-answer/index.js

+import React from 'react'
+import styles from './no-automated-answer.module.css'
+const NoAutomatedAnswer = ({ question_id }) => {
+  return (
+    <div className={styles.no_automated_answer}>
+      <h1 className={styles.title}>
+        No Automated answer found for this question
+      </h1>
+      <button className={styles.generate_btn}>Generate one</button>
+    </div>
+  )
+}
+
+export default NoAutomatedAnswer

client/components/automated-answer/no-automated-answer/no-automated-answer.module.css

+.no_automated_answer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.generate_btn {
+  color: #fff;
+  background-color: var(--blue-500);
+  border: 1px solid transparent;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 40%);
+  padding: 0.8em;
+  margin: 1em;
+}
+
+.title {
+  font-size: 1.5em;
+  text-align: center;
+}

client/pages/questions/[slug].js

@@ -14,6 +14,7 @@ import CommentItem from '../../components/post/comment-list/comment-item'
 import AnswerContainer from '../../components/answer-container'
 import AddAnswer from '../../components/add-answer'
 import { Spinner } from '../../components/icons'
+import AutomatedAnswerContainer from '../../components/automated-answer-container'
 
 const QuestionDetail = ({ questionId, title }) => {
   const [question, setQuestion] = useState(null)
@@ -93,6 +94,8 @@ const QuestionDetail = ({ questionId, title }) => {
               </CommentList>
             </PostWrapper>
 
+            <AutomatedAnswerContainer question_id={questionId} />
+            
             {question.answers.length > 0 && (
               <AnswerContainer
                 answersCount={question.answers.length}