similar question suggestions model added

client/components/question-ask-view/question-form/index.js

@@ -9,6 +9,7 @@ import Button from '../../button'
 import Textarea from '../../textarea'
 import FormInput from '../../form-input'
 import TagInput from '../../tag-input'
+import SimilarQuestionSuggestions from '../../similar-question-suggestions'
 
 import styles from './question-form.module.css'
 
@@ -109,6 +110,13 @@ const QuestionForm = () => {
               </Button>
             </div>
           </div>
+          {values.title && (
+            <SimilarQuestionSuggestions
+              title={values.title}
+              tags={values.tags}
+              description={values.text}
+            />
+          )}
         </form>
       )}
     </Formik>

client/components/similar-question-suggestions/index.js

+import React, { useEffect, useState } from 'react'
+import SimilarQuestion from './similar-question'
+import { Title } from '../styled-text-spans/index'
+import styles from './similar-question-suggestions.module.css'
+
+const SimilarQuestionSuggestions = ({ title, description, tags }) => {
+  const [similarQuestions, setSimilarQuestions] = useState([
+    {
+      url: 'https://dasunx.com',
+      title: 'How to center a div element vertically',
+      author: {
+        username: 'dasunx',
+        profilePhoto:
+          'https://secure.gravatar.com/avatar/608a987a8401796f68c4d11f?s=90&d=monsterid'
+      },
+      views: 240,
+      comments: 12
+    },
+    {
+      url: 'https://dasunx.com',
+      title:
+        "I can center it horizontally, but the thing is I don't know how to center it vertically.I can center it horizontally, but the thing is I don't know how to center it vertically.",
+      author: {
+        username: 'dasunx',
+        profilePhoto:
+          'https://secure.gravatar.com/avatar/608a987a8401796f68c4d11f?s=90&d=monsterid'
+      },
+      views: 20,
+      comments: 1
+    },
+    {
+      url: 'https://dasunx.com',
+      title: 'Test question 3',
+      author: {
+        username: 'dasunx',
+        profilePhoto:
+          'https://secure.gravatar.com/avatar/608a987a8401796f68c4d11f?s=90&d=monsterid'
+      },
+      views: 40,
+      comments: 6
+    }
+  ])
+  useEffect(() => {
+    // TODO - Fetch similar questions from backend using the title/ description
+    console.log('TITLE CHANGED')
+  }, [])
+  return (
+    <div className={styles.container}>
+      <h1>
+        Similar questions -{' '}
+        <Title title={title} textColor="var(--main-purple)" />
+      </h1>
+      {similarQuestions.map((question, index) => {
+        return <SimilarQuestion question={question} key={index} />
+      })}
+    </div>
+  )
+}
+
+export default SimilarQuestionSuggestions

client/components/similar-question-suggestions/similar-question-suggestions.module.css

+.container {
+  background-color: var(--white);
+  min-height: 10vh;
+  margin: 2em 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.05),
+    0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  max-width: 950px;
+}

client/components/similar-question-suggestions/similar-question/index.js

+import Link from 'next/link'
+import React from 'react'
+import { Bold, Title } from '../../styled-text-spans/index'
+import styles from './similar-question.module.css'
+
+const SimilarQuestion = ({ question }) => {
+  const { title, author, url, views, comments } = question
+  return (
+    <Link
+      href="/questions/[slug]"
+      as={`/questions/6087be20b0c06a179059dfa8-how-to-center-a-div-element-vertically`}
+    >
+      <div className={styles.similarquestion}>
+        <Link href="/users/[user]" as={`/users/${author.username}`}>
+          <div className={styles.userwrapper}>
+            <img
+              className={styles.profilephoto}
+              src={author.profilePhoto}
+              alt={author.username}
+            />
+            <Bold text={`@${author.username}`} />
+          </div>
+        </Link>
+        <div className={styles.questionwrapper}>
+          <Title title={title} />
+          <div>
+            <Bold text={views} /> Views and <Bold text={comments} />
+            Comments
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+export default SimilarQuestion

client/components/similar-question-suggestions/similar-question/similar-question.module.css

+.similarquestion {
+  background-color: var(--powder-200);
+  margin: 0.5em 0;
+  padding: 0.5em 0.3em;
+  display: flex;
+  flex-direction: row;
+  border-radius: 5px;
+}
+.userwrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.questionwrapper {
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  overflow: hidden;
+}
+.profilephoto {
+  max-height: 4rem;
+}

client/components/styled-text-spans/index.js

+import React from 'react'
+import styles from './styled-text-spans.module.css'
+
+export const Bold = ({ text }) => {
+  return <span className={styles.bold}>{text}</span>
+}
+
+export const Italic = ({ text }) => {
+  return <span className={styles.italic}>{text}</span>
+}
+
+export const Title = ({ title, textColor }) => {
+  return (
+    <span className={styles.title} style={{ color: textColor }}>
+      {title}
+    </span>
+  )
+}

client/components/styled-text-spans/styled-text-spans.module.css

+.bold {
+  font-weight: 600;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 1.2rem;
+  min-width: 98%;
+  white-space: nowrap;
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+}

client/styles/variables.css

@@ -28,6 +28,7 @@
   --powder-600: #5b8db1;
   --powder-700: #39739d;
   --powder-800: #2c5777;
-
+  --main-purple: #800080;
+  
   --fade: 120ms;
 }