Set children color

frontend/src/components/Header.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react';
-//import logo from './img/logo.jpeg';
 import './styles/HeaderStyle.css';
 
 

frontend/src/components/PrevNext.js

@@ -1,25 +1,62 @@
-import React from 'react';
-import Data from './data.json'
-
-
-function PrevNext() {
-
+import React, { useState, useCallback } from "react";
+import faq from "./data.json";
+import "./styles/BodyStyle.css";
+
+const Faq = ({ faq, parentID, depth = 0 }) => {
+  let [selectedID, setSelectedID] = useState(-1);
+  const toggleSelectedID = useCallback(
+    (index) => {
+      if (selectedID === index) {
+        setSelectedID(-1);
+      } else {
+        setSelectedID(index);
+      }
+    },
+    [selectedID]
+  );
+
+  return faq.map((questionAnswer, index) => {
     return (
-      <div>
-        <div>
-          {
-            Data.map(post => {
-              return <h4> {post.text}</h4>
-            })
-          }
+      <div className="questions-frame">
+        <div key={index} className="question-answer">
+          <div
+            className={parentID == undefined ? "question" : "question-child"}
+            onClick={() => {
+              toggleSelectedID(index);
+            }}
+          >
+            <div>{questionAnswer.text}</div>
+
+            <span>^</span>
+          </div>
+          <div>
+            {index === selectedID && (
+              <div key={index}
+              className={parentID == undefined ? "answer" : "answer-child"}
+              >
+                {questionAnswer.answer}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="children">
+          {index === selectedID && questionAnswer.children && (
+            <div>
+            <Faq faq={questionAnswer.children} parentID={index} depth={depth++}/>
+            </div>
+          )}
         </div>
       </div>
     );
-  }
-
-export default PrevNext;
-
-
-
+  });
+};
 
+const PrevNext = () => {
+  return (
+    <div>
+      <Faq faq={faq} />
+    </div>
+  );
+};
 
+export default PrevNext;

frontend/src/components/data.json

@@ -1,62 +1,43 @@
 [
-    {
-       "id": 0,
-       "text": "Who are oss cameroon owners",
-       "type": "Q",
-       "children": [3]
-    },
-    {
-       "id": 1,
-       "text": "Sanix Darker, Elhmmn, Eric, Yvan, Sherlock Wisdom",
-       "type": "A",
-       "children": [2, 4]
-    },
-    {
-       "id": 2,
-       "text": "About Oss Cameroon",
-       "type": "Q",
-       "children": [4, 5]
-    },
-    {
-       "id": 3,
-       "text": "Open Source Community by Cameroonian developers",
-       "type": "A",
-       "children": []
-    },
-    {
-       "id": 4,
-       "text": "Goals",
-       "type": "Q",
-       "children": [6]
-    },
-    {
-      "id": 5,
-      "text": "Bring developers together, Cultivate the habit of contributing to open source projects in the Cameroonian developer ",
-      "type": "A",
-      "children": []
-    },
-    {
-      "id": 6,
-      "text": "Vision",
-      "type": "Q",
-      "children": []
-    },
-    {
-      "id": 7,
-      "text": "Promote talent and know-how of Cameroonian by using our technical knowledge to ring solutions to problems found in our society ",
-      "type": "Q",
-      "children": []
-    },
-    {
-      "id": 8,
-      "text": "Our target",
-      "type": "Q",
-      "children": []
-    },
-    {
-      "id": 9,
-      "text": "The Cameroon tech community. Both anglophones and francophones",
-      "type": "Q",
-      "children": []
-    }
-  ]
+  {
+    "text": "who are oss cameroon owners",
+    "answer": "Sanix and Eric",
+    "children": [
+      {
+        "text": "How did they meet",
+        "answer": "on twitter",
+        "children": [
+          {
+            "text": "One level deeper",
+            "answer": "One question deeper"
+          },
+          {
+            "text": "One level deeper",
+            "answer": "One question deeper"
+          }
+        ]
+      },
+      {
+        "text": "Why is Sanix so good at programming",
+        "answer": "he likes panda"
+      }
+    ]
+  },
+
+  {
+    "text": "What is their goal",
+    "answer": "They don't know",
+    "children": [
+      {
+        "text": "Vision",
+        "answer": "Promote talent and know-how of Cameroonian developers"
+      },
+      { "text": "Target", "answer": "The Cameroon tech community" }
+    ]
+  },
+  {
+    "text": "Projects",
+    "answer": "Visit github page"
+  }
+]
+

frontend/src/components/styles/BodyStyle.css

@@ -1,14 +1,76 @@
-.btn-class{
-    padding: auto;
-    border-radius: 8px;
-    box-align: center;
-    border: 0px solid blue;
-    margin: auot;
-
-}
-.button{
+.questions-frame
+{
+	align-items: center;
+    display: flex;
     flex-direction: column;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-}
+    justify-content: flex-start;
+}
+
+.question-answer
+{
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	width: 80%;
+}
+
+.question
+{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-top:1rem;
+	background-color: rgba(200, 200, 200, 1);
+	border: 2px solid blue;
+	box-shadow: 0 0 3px blue;
+	border-radius: 5px;
+	width: 100%;
+	padding: 10px 10px;
+}
+
+.question-child
+{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-top:1rem;
+	background-color: red;
+	border: 2px solid blue;
+	box-shadow: 0 0 3px blue;
+	border-radius: 5px;
+	width: 100%;
+	padding: 10px 10px;
+}
+
+
+.answer
+{
+	width: 100%;
+	height: auto;
+	background-color: rgb(32, 32, 88);
+	color: white;
+	border-radius: 15px;
+	padding: 10px 10px;
+	display: flex;
+	flex-direction: column;
+
+}
+
+.answer-child
+{
+	width: 100%;
+	height: auto;
+	background-color: yellow;
+	color: white;
+	border-radius: 15px;
+	padding: 10px 10px;
+	display: flex;
+	flex-direction: column;
+
+}
+
+.children
+{
+	width: 80%;
+}
+