add accordion and delete button

Author: Aishwarya Nair

peer-prep.zip

@@ -0,0 +1,88 @@
+
+.question-container {
+    display: flex;
+    margin: auto;
+    margin-top: 30px;
+    width: 600px;
+    gap: 20px;
+    align-items: center;
+}
+
+.question {
+    width: 500px;
+    background: #e9e9e9;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+}
+
+.q-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+.q-header span {
+    padding: 0.5rem 1rem;
+}
+
+.q-name {
+    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;
+    background: #A98CD8;
+    padding: 0.5rem 0.5rem;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+}
+
+.q-id {
+    padding: 0.5rem 1rem;
+}
+
+.q-description {
+    width: 400px;
+    height: 250px;
+    margin-left: 20px;
+    border: none;
+}
+
+.q-content {
+    max-height: 0;
+    overflow:hidden;
+}
+
+.q-content-show {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height:150px;
+    
+}
+
+.delete-btn img {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+}

peer-prep/src/Components/Assets/bin.png

@@ -0,0 +1,39 @@
+import React, {useState} from 'react'
+import './Question.css'
+import delete_icon from '../Assets/bin.png'
+
+export const Question = ({question, i}) => {
+    const [selected, setSelected] = useState(null);
+    const toggle = (i) => {
+        if(selected === i) {
+            return setSelected(null)
+        }
+        setSelected(i)
+    }
+  return (
+    <div className="question-container">
+        <div className="question">
+        <div className="q-header" onClick = {() => toggle(i)}>
+            <div className="q-name">
+                <div className="q-id">#{question.id}</div>
+                <div className="q-title">{question.title}</div>
+            </div>
+           <span> {selected === i ? "-" : "+"}</span>
+        </div>
+        <div className= {selected === i ? "q-content-show": "q-content"}>
+            <div className="q-tags">
+                <div className="q-tag">{question.difficulty}</div>
+                <div className="q-tag">{question.topic}</div>
+            </div>
+            <div className="q-description">{question.description}</div>
+        </div>
+       
+        
+    </div>
+    <div className="delete-btn">
+        <img src= {delete_icon} alt="" />
+    </div>
+    </div>
+    
+  )
+}

peer-prep/src/Components/QuestionList/Question.css

@@ -11,37 +11,37 @@
     border-radius: 5px;
 }
 
-.q-header {
+.q-form-header {
     display: flex;
     align-items: center;
     height: 60px;
     font-size: 25px;
 
 }
 
-.q-title {
+.q-form-title {
     height: 30px;
     padding: 0.5rem 0.5rem;
 }
 
-.q-tags {
+.q-form-tags {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-left: 20px;
 }
 
-.q-tag {
+.q-form-tag {
     width: 80px;
     height: 25px;
     border-radius: 5px;
 
 }
 
-.q-id {
+.q-form-id {
     padding: 0.5rem 1rem;
 }
-.q-input {
+.q-form-input {
     outline: none;
     border: none;
     background: #c9c9c9;
@@ -51,14 +51,14 @@
     sans-serif;
   }
 
-  .q-input::placeholder {
+  .q-form-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 {
+  .q-form-description {
     width: 400px;
     height: 250px;
     margin-left: 20px;

peer-prep/src/Components/QuestionList/Question.jsx

@@ -15,28 +15,28 @@ export const QuestionForm = ({qId, addQuestion, setAddQ}) => {
   }
   return (
     <form className = "container" onSubmit={handleSubmit(setAddQ, addQuestion)}>
-      <div className="q-header">
-        <div className="q-id">#{qId}</div>
-        <input type="text" className="q-title q-input" 
+      <div className="q-form-header">
+        <div className="q-form-id">#{qId}</div>
+        <input type="text" className="q-form-title q-form-input" 
         placeholder='Question Title' onChange = {
           (e) => setTitle(e.target.value)
         }/>
       </div>
 
-        <div className="q-tags">
-          <input type="text" className="q-tag q-input" 
+        <div className="q-form-tags">
+          <input type="text" className="q-form-tag q-form-input" 
           placeholder = 'Difficulty'
           onChange = {
             (e) => setDifficulty(e.target.value)
           }/>
-          <input type="text" className="q-tag q-input" 
+          <input type="text" className="q-form-tag q-form-input" 
           placeholder = 'Topic'
           onChange = {
             (e) => setTopic(e.target.value)
           }
           />
         </div>
-        <textarea type="text" className="q-description q-input" 
+        <textarea type="text" className="q-form-description q-form-input" 
         placeholder = "Question description"
         onChange = {
           (e) => setDescription(e.target.value)

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

@@ -9,8 +9,8 @@
 }
 
 .add-q-btn {
-    position: absolute;
-    right: 30px;
+    position: fixed;
+    right: 60px;
     bottom: 30px;
     display: flex;
     justify-content: center;
@@ -22,4 +22,8 @@
     border-radius: 5px;
     font-size: 19px;
     cursor: pointer;
+}
+
+.accordion {
+
 }

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

@@ -1,11 +1,15 @@
 import React, { useState, useEffect} from 'react'
 import { QuestionForm } from './QuestionForm'
+import {Question} from './Question'
 import './QuestionList.css'
 
 export const Questions = () => {
   const [qId, setQId] = useState(0);
   const [isAddQ, setAddQ] = useState(false);
   const [qs, setQs] = useState([])
+  const toggle = (i) => {
+    return i
+  }
 
   const addQuestion = (qTitle, qDifficulty, qTopic, qDescription) => {
     setQs([...qs, {id: qId, title: qTitle, difficulty: qDifficulty,
@@ -15,14 +19,23 @@ export const Questions = () => {
   useEffect(() => console.log(qs), [qs]);
 
   return (
+    
     <div className="q-wrapper">
+      <div className="accordion">
+        {qs.map((q, i) => (
+          <Question question = {q} key = {q.id} i = {i}/>
+        ))}
+      </div>
+
       {isAddQ === false ? <div></div> : <QuestionForm qId = {qId} addQuestion = {addQuestion}
       setAddQ = {setAddQ}/>}
       <div className="add-q-btn" onClick = {() => {
-        setQId(qId + 1);
-        setAddQ(true);
-      }}> Add question</div>
+      setQId(qId + 1);
+      setAddQ(true);
+    }}> Add question</div>
     </div>
 
+   
+    
   )
 }