feat(#775): now we see one a question at a time

src/components/FaqAccordian.js

@@ -1,33 +1,39 @@
-import React, { useState } from "react"
+import React from "react"
 import { AnimatePresence, motion } from "framer-motion"
 
 import { IoIosArrowDown } from "react-icons/io"
 
-const FaqAccordian = ({ faq }) => {
-  const [isOpen, setIsOpen] = useState(false)
+const FaqAccordian = ({ faq, currentQuestion, setCurrentQuestion }) => {
+  const onClickHandler = () => {
+    if (currentQuestion === faq.id) {
+      return setCurrentQuestion(0)
+    }
+
+    setCurrentQuestion(faq.id)
+  }
 
   return (
     <li className="flex items-center justify-center w-9/12 mb-8 flex-column sm:w-9/12 md:w-8/12 lg:w-1/2">
       <div
-        onClick={() => setIsOpen(!isOpen)}
-        onKeyDown={() => setIsOpen(!isOpen)}
+        onClick={onClickHandler}
+        onKeyDown={onClickHandler}
         tabIndex={0}
         role="button"
         className={`w-full p-8 rounded shadow cursor-pointer details backdrop-blur-lg ${
-          isOpen ? "bg-white/30" : "bg-white/20"
+          currentQuestion === faq.id ? "bg-white/30" : "bg-white/20"
         }`}
       >
         <p className="relative flex items-center justify-between pr-4 text-base font-bold leading-none text-white list-none">
           <span>{faq.questions}</span>
           <IoIosArrowDown
             className={`text-2xl duration-200 ${
-              isOpen && "rotate-180"
+              currentQuestion === faq.id && "rotate-180"
             }`}
           />
         </p>
 
         <AnimatePresence>
-          {isOpen && (
+          {currentQuestion === faq.id && (
             <motion.p
               initial={{ opacity: 0, height: 0, marginTop: 0 }}
               animate={{ opacity: 1, height: "auto", marginTop: 12 }}
@@ -40,7 +46,7 @@
         </AnimatePresence>
       </div>
     </li>
-  )
+  );
 }
 
 export default FaqAccordian

src/components/faq.js

@@ -1,16 +1,20 @@
-import Faqs from "data/faq.json"
 import FaqAccordian from "components/FaqAccordian"
 import Title from "components/Title"
 
+import { faqData } from "data/faq"
+import { useState } from "react"
+
 const Faq = () => {
+  const [currentQuestion, setCurrentQuestion] = useState(1);
+
   return (
     <div>
         <div className="page-title mb-16 mt-[30px] text-center text-white">
           <Title heading="Frequently asked questions" />
         </div>
         <ul className="flex flex-col items-center justify-center">
-          {Faqs.map((faq, idx) => (
-            <FaqAccordian key={idx} faq={faq} />
+          {faqData.map((faq) => (
+            <FaqAccordian key={faq.id} faq={faq} currentQuestion={currentQuestion} setCurrentQuestion={setCurrentQuestion} />
           ))}
         </ul>
     </div>

src/data/faq.js

@@ -0,0 +1,36 @@
+export const faqData = [
+  {
+    id: 1,
+    questions: 'What does "4C" stands for?',
+    answers: '4C stands for "Cool Community of Content Creators".',
+  },
+  {
+    id: 2,
+    questions: 'What is the goal of "4C"? ',
+    answers:
+      "We discuss Content Creation using Videos, Articles and Social Media. Our goal is to create a decentralized community, where everyone can create some events related to the community on their channels.",
+  },
+  {
+    id: 3,
+    questions: 'Is "4C" open-source and how can I contribute?',
+    answers:
+      "4C is open source. All contributions are welcome. Visit our contributions page to learn how you can contribute.",
+  },
+  {
+    id: 4,
+    questions: "How can I join the community?",
+    answers: "Join our Discord Server and visit the #start-here channel.",
+  },
+  {
+    id: 5,
+    questions: 'Is "4C" only for experienced content creators?',
+    answers:
+      "Absolutely no. The community fosters growth on all levels, irrespective of prior experience —a platform where you can talk about your ideas and get opinions on how to execute them.",
+  },
+  {
+    id: 6,
+    questions: 'What are the benefits of the "4C" community?',
+    answers:
+      "You get support, activities, collaborations, free dedicated content creation webinars (yes, you got it right ! 😄), coffee chat, and a meme channel! ",
+  },
+];