From 6ad983e92438aaafb5653a944d7cd6b8d5a6a756 Mon Sep 17 00:00:00 2001 From: Ali Reza Date: Mon, 16 Oct 2023 17:02:48 +0800 Subject: [PATCH 1/2] feat(#775): now we see one a question at a time --- .husky/commit-msg | 6 +++--- src/components/FaqAccordian.js | 24 ++++++++++++++--------- src/components/faq.js | 10 +++++++--- src/data/faq.js | 36 ++++++++++++++++++++++++++++++++++ src/data/faq.json | 26 ------------------------ 5 files changed, 61 insertions(+), 41 deletions(-) create mode 100644 src/data/faq.js delete mode 100644 src/data/faq.json diff --git a/.husky/commit-msg b/.husky/commit-msg index c5812b39..b5676766 100755 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -1,4 +1,4 @@ -# #!/usr/bin/env sh -# . "$(dirname -- "$0")/_/husky.sh" +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" -# npx --no -- commitlint --edit "$1" +npx --no -- commitlint --edit "$1" diff --git a/src/components/FaqAccordian.js b/src/components/FaqAccordian.js index 4ad975c5..2aab3c7d 100644 --- a/src/components/FaqAccordian.js +++ b/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 (
  • 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" }`} >

    {faq.questions}

    - {isOpen && ( + {currentQuestion === faq.id && ( {
    • - ) + ); } export default FaqAccordian diff --git a/src/components/faq.js b/src/components/faq.js index b404e422..d92a289b 100644 --- a/src/components/faq.js +++ b/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> <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> diff --git a/src/data/faq.js b/src/data/faq.js new file mode 100644 index 00000000..ee0cabe9 --- /dev/null +++ b/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! ", + }, +]; diff --git a/src/data/faq.json b/src/data/faq.json deleted file mode 100644 index e0a777f3..00000000 --- a/src/data/faq.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "questions": "What does \"4C\" stands for?", - "answers": "4C stands for \"Cool Community of Content Creators\"." - }, - { - "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." - }, - { - "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." - }, - { - "questions": "How can I join the community?", - "answers": "Join our Discord Server and visit the #start-here channel." - }, - { - "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." - }, - { - "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! " - } -] From e6dd0320d64adf2f94c4f12ed89c7320d43efb74 Mon Sep 17 00:00:00 2001 From: Ali Reza <99729607+AliReza1083@users.noreply.github.com> Date: Mon, 16 Oct 2023 17:09:54 +0800 Subject: [PATCH 2/2] Update commit-msg --- .husky/commit-msg | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.husky/commit-msg b/.husky/commit-msg index b5676766..c5812b39 100755 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -1,4 +1,4 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" +# #!/usr/bin/env sh +# . "$(dirname -- "$0")/_/husky.sh" -npx --no -- commitlint --edit "$1" +# npx --no -- commitlint --edit "$1"