add question form

Author: Aishwarya Nair

peer-prep/src/App.js

@@ -1,12 +1,15 @@
 import './App.css';
-import { LoginSignUp } from './Components/LoginSignUp/LoginSignUp';
+//import { LoginSignUp } from './Components/LoginSignUp/LoginSignUp';
 import { Navbar } from './Components/Navbar/Navbar';
+import { Questions } from './Components/Questions/Questions';
 
 function App() {
   return (
     <div>
       <Navbar/>
-      <LoginSignUp/>
+      {/*<LoginSignUp/>*/}
+      <Questions/>
+
     </div>
   );
 }

peer-prep/src/Components/Navbar/Navbar.jsx

@@ -4,7 +4,7 @@ import './Navbar.css'
 export const Navbar = () => {
   return (
     <nav className = "nav">
-       <a href = "#" className = "logo"> <span>&lt;Peer/</span> Prep&gt;</a>
+       <a href = "#" className = "logo"> <span>&lt;Peer/</span>Prep&gt;</a>
     </nav>
   )
 }

peer-prep/src/Components/Questions/QuestionForm.css

@@ -0,0 +1,80 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    margin-top: 30px;
+    width: 500px;
+    height: 300px;
+    background: #e9e9e9;
+    padding: 30px 20px;
+    gap: 20px;
+    border-radius: 5px;
+}
+
+.q-header {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    font-size: 25px;
+
+}
+
+.q-title {
+    height: 30px;
+    padding: 0.5rem 0.5rem;
+}
+
+.q-tags {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: 20px;
+}
+
+.q-tag {
+    width: 80px;
+    height: 25px;
+    border-radius: 5px;
+  
+}
+
+.q-id {
+    padding: 0.5rem 1rem;
+}
+.q-input {
+    outline: none;
+    border: none;
+    background: #c9c9c9;
+    padding: 0.5rem 0.5rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  }
+
+  .q-input::placeholder {
+    color: #797979;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  }
+  
+  .q-description {
+    width: 400px;
+    height: 250px;
+    margin-left: 20px;
+  }
+
+  
+  .submit-btn {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    width: 90px;
+    height: 130px;
+    color: #fff;
+    background: #52CC65;
+    border-radius: 5px;
+    font-size: 19px;
+    cursor: pointer;
+  }

peer-prep/src/Components/Questions/QuestionForm.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import './QuestionForm.css'
+
+
+export const QuestionForm = ({qId}) => {
+  return (
+    <form className = "container">
+      <div className="q-header">
+        <div className="q-id">#{qId}</div>
+        <input type="text" className="q-title q-input" 
+        placeholder='Question Title'/>
+      </div>
+       
+        <div className="q-tags">
+          <input type="text" className="q-tag q-input" placeholder = 'Difficulty'/>
+          <input type="text" className="q-tag q-input" placeholder = 'Topic'/>
+        </div>
+        <textarea type="text" className="q-description q-input" 
+        placeholder = "Question description"/>
+
+        <div className="submit-btn">Submit</div>
+   
+      
+    </form>
+  )
+}

peer-prep/src/Components/Questions/Questions.css

@@ -0,0 +1,25 @@
+.q-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    margin-top: 40px;
+    width: 600px;
+    background: #fff;
+    padding-bottom: 30px;
+}
+
+.add-q-btn {
+    position: absolute;
+    right: 30px;
+    bottom: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 150px;
+    height: 60px;
+    color: #fff;
+    background: #52CC65;
+    border-radius: 5px;
+    font-size: 19px;
+    cursor: pointer;
+}

peer-prep/src/Components/Questions/Questions.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import { QuestionForm } from './QuestionForm'
+import './Questions.css'
+
+export const Questions = () => {
+  const [qId, setQId] = useState(0);
+  const [isAddQ, setAddQ] = useState(false);
+  return (
+    <div className="q-wrapper">
+      {isAddQ === false ? <div></div> : <QuestionForm qId = {qId}/>}
+      <div className="add-q-btn" onClick = {() => {
+        setQId(qId + 1);
+        setAddQ(true);
+      }}> Add question</div>
+    </div>
+    
+  )
+}