[FAQs] Structure on FAQs section (#12)

* ignore idea folder * structure for FAQs is created * added all the faqs of about hackupc section * created interfaces * added interfaces in faqs and added icon * add travel questions * added all the questions --------- Co-authored-by: Carlota Catot Bragós <[email protected]>
hackupc · Feb 8, 2024 · 475e395 · 475e395
1 parent 9f42436
commit 475e395
Show file tree

Hide file tree

Showing 8 changed files with 461 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,7 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# IDE
-.idea/
-
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "html-react-parser": "^5.1.2",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",

diff --git a/src/app/components/FAQs.tsx b/src/app/components/FAQs.tsx
@@ -1,3 +1,163 @@
+import styled from "styled-components";
+import {
+  applications_faqs,
+  hackupc_faqs,
+  teams_faqs,
+  travel_faqs,
+} from "@/app/data/faqs_data";
+import parse from "html-react-parser";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from "react";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import {
+  MobileBreakpoint,
+  Primary100,
+  Secondary500,
+  SpacingL,
+  SpacingM,
+  SpacingS,
+  SpacingXS,
+} from "@/app/genericComponents/tokens";
+import { Section } from "@/app/genericComponents/General";
+import { BlockTitle, Body, SectionTitle } from "@/app/genericComponents/Fonts";
+
+const Split = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: ${SpacingL};
+
+  @media (max-width: ${MobileBreakpoint}) {
+    flex-direction: column;
+  }
+`;
+
+const ColumnsQuestions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${SpacingL};
+  width: 45%;
+
+  @media (max-width: ${MobileBreakpoint}) {
+    width: 100%;
+  }
+`;
+
+const QuestionsBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${SpacingS};
+`;
+
+const Question = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  gap: ${SpacingS};
+`;
+
+const QuestionTitle = styled(Body)`
+  margin-bottom: ${SpacingXS};
+  font-weight: 700;
+`;
+
+const LastBlock = styled.div`
+  text-align: center;
+  margin-top: ${SpacingM};
+`;
+
 export default function FAQs() {
-  return <div>This is the FAQs :)</div>;
+  const [activeFaqId, setActiveFaqId] = useState<null | number>(null);
+
+  const toggleFaq = (id: number) => {
+    // If the clicked FAQ is already active, close it, otherwise open the clicked FAQ
+    setActiveFaqId(activeFaqId === id ? null : id);
+  };
+
+  return (
+    <Section>
+      <SectionTitle>FAQs</SectionTitle>
+      <Split>
+        <ColumnsQuestions>
+          <QuestionsBlock>
+            <BlockTitle color={Secondary500}>About HackUPC</BlockTitle>
+            {hackupc_faqs.map((faq) => (
+              <Question key={faq.id} onClick={() => toggleFaq(faq.id)}>
+                <FontAwesomeIcon
+                  icon={activeFaqId === faq.id ? faMinus : faPlus}
+                  style={{ marginTop: 4 }}
+                  color={activeFaqId === faq.id ? Secondary500 : Primary100}
+                />
+                <div>
+                  <QuestionTitle>{faq.question}</QuestionTitle>
+                  {activeFaqId === faq.id && <Body>{parse(faq.answer)}</Body>}
+                </div>
+              </Question>
+            ))}
+          </QuestionsBlock>
+          <QuestionsBlock>
+            <BlockTitle color={Secondary500}>Travel Reimbursement</BlockTitle>
+            {travel_faqs.map((faq) => (
+              <Question key={faq.id} onClick={() => toggleFaq(faq.id)}>
+                <FontAwesomeIcon
+                  icon={activeFaqId === faq.id ? faMinus : faPlus}
+                  style={{ marginTop: 4 }}
+                  color={activeFaqId === faq.id ? Secondary500 : Primary100}
+                />
+                <div>
+                  <QuestionTitle>{faq.question}</QuestionTitle>
+                  {activeFaqId === faq.id && <Body>{parse(faq.answer)}</Body>}
+                </div>
+              </Question>
+            ))}
+          </QuestionsBlock>
+        </ColumnsQuestions>
+        <ColumnsQuestions>
+          <QuestionsBlock>
+            <BlockTitle color={Secondary500}>Applications</BlockTitle>
+            {applications_faqs.map((faq) => (
+              <Question key={faq.id} onClick={() => toggleFaq(faq.id)}>
+                <FontAwesomeIcon
+                  icon={activeFaqId === faq.id ? faMinus : faPlus}
+                  style={{ marginTop: 4 }}
+                  color={activeFaqId === faq.id ? Secondary500 : Primary100}
+                />
+                <div>
+                  <QuestionTitle>{faq.question}</QuestionTitle>
+                  {activeFaqId === faq.id && <Body>{parse(faq.answer)}</Body>}
+                </div>
+              </Question>
+            ))}
+          </QuestionsBlock>
+          <QuestionsBlock>
+            <BlockTitle color={Secondary500}>Teams</BlockTitle>
+            {teams_faqs.map((faq) => (
+              <Question key={faq.id} onClick={() => toggleFaq(faq.id)}>
+                <FontAwesomeIcon
+                  icon={activeFaqId === faq.id ? faMinus : faPlus}
+                  style={{ marginTop: 4 }}
+                  color={activeFaqId === faq.id ? Secondary500 : Primary100}
+                />
+                <div>
+                  <QuestionTitle>{faq.question}</QuestionTitle>
+                  {activeFaqId === faq.id && <Body>{parse(faq.answer)}</Body>}
+                </div>
+              </Question>
+            ))}
+          </QuestionsBlock>
+        </ColumnsQuestions>
+      </Split>
+      <LastBlock>
+        <BlockTitle color={Secondary500}>
+          What if I have another question?
+        </BlockTitle>
+        <Body style={{ paddingBottom: SpacingS }}>
+          DM or tag us on X @hackupc or, if you want to contact us via email,
+          drop us a line at [email protected].
+        </Body>
+        <Body>
+          If your issue is related to Travel Reimbursment, write us at
+          [email protected]
+        </Body>
+      </LastBlock>
+    </Section>
+  );
 }