Redesigned FAQs page

Ed-Gah · Oct 4, 2023 · 0139897 · 0139897
1 parent eabb00d
commit 0139897
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 22 deletions.
diff --git a/.env.example b/.env.example
diff --git a/components/FaqsSection.js b/components/FaqsSection.js
@@ -0,0 +1,32 @@
+import React from "react";
+
+const FaqsSection = ({ faqs_data }) => {
+  return (
+    <div>
+      <style jsx>
+        {`
+          .cdx-card-custom {
+            margin-top: 20px;
+            flex: 20%;
+            margin-right: 20px;
+            max-width: 400px;
+          }
+          .queue-section {
+            display: flex;
+            flex-direction: row;
+          }
+        `}
+      </style>
+      {faqs_data?.map((faq, index) => (
+        <span key={index} className="cdx-card cdx-card-custom">
+          <span className="cdx-card__text">
+            <span className="cdx-card__text__title">{faq?.que}</span>
+            <span className="cdx-card__text__description">{faq?.ans}</span>
+          </span>
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default FaqsSection;
diff --git a/components/Header.js b/components/Header.js
@@ -64,7 +64,7 @@ class Header extends Component {
                   role="presentation"
                 >
                   <label
-                    for="form-tabs-1-input"
+                    htmlFor="form-tabs-1-input"
                     role="tab"
                     aria-selected={
                       this.props.page === "index" ? "true" : "false"
@@ -81,7 +81,7 @@ class Header extends Component {
                   role="presentation"
                 >
                   <label
-                    for="form-tabs-2-input"
+                    htmlFor="form-tabs-2-input"
                     role="tab"
                     aria-selected={
                       this.props.page === "queue" ? "true" : "false"
@@ -98,7 +98,7 @@ class Header extends Component {
                   role="presentation"
                 >
                   <label
-                    for="form-tabs-3-input"
+                    htmlFor="form-tabs-3-input"
                     role="tab"
                     aria-selected={
                       this.props.page === "stats" ? "true" : "false"
@@ -108,21 +108,23 @@ class Header extends Component {
                   </label>
                 </li>
               </Link>
-              {/* <Link href="/faq">
+              <Link href="/faqs">
                 <li
                   id="form-tabs-3-label"
                   className="cdx-tabs__list__item"
                   role="presentation"
                 >
                   <label
-                    for="form-tabs-3-input"
+                    htmlFor="form-tabs-3-input"
                     role="tab"
-                    aria-selected={this.props.page === "faq" ? "true" : "false"}
+                    aria-selected={
+                      this.props.page === "faqs" ? "true" : "false"
+                    }
                   >
-                    FAQ
+                    FAQs
                   </label>
                 </li>
-              </Link> */}
+              </Link>
             </ul>
             {session && (
               <div className="user-info__right">

diff --git a/package.json b/package.json
@@ -59,8 +59,8 @@
     "open": "^7.0.3",
     "pdfkit": "^0.9.1",
     "querystring": "^0.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-loaders": "^3.0.1",
     "react-table": "^7.0.0-rc.16",
     "request": "^2.88.0",

diff --git a/pages/faqs.js b/pages/faqs.js
@@ -0,0 +1,40 @@
+import Header from "../components/Header";
+import FaqsSection from "../components/FaqsSection";
+import { faq_data } from "../utils/constants";
+
+const Faqs = () => {
+  return (
+    <div>
+      <style jsx>
+        {`
+          .faq-container {
+            color: #36c;
+            flex-grow: 0;
+            overflow: auto;
+            height: 70vh;
+          }
+          .cdx-message {
+            margin-top: 20px;
+            flex-grow: 0.1;
+            justify-content: center;
+            align-items: center;
+          }
+          .
+        `}
+      </style>
+      <Header page="faqs" />
+      <div>
+        <div className="container p-0">
+          <div className="main-content">
+            <h4>Frequently ask questions</h4>
+            <div className="faq-container">
+              <FaqsSection faqs_data={faq_data} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Faqs;