From 5c4bc1bca713870b2f93832460b050bd3cd1f3f3 Mon Sep 17 00:00:00 2001 From: mendacium Date: Mon, 18 Dec 2023 16:58:21 +0530 Subject: [PATCH 1/6] added accordian to faq page --- src/pages/FAQ.tsx | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index 06bd611d..17ecc010 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -7,7 +7,9 @@ import { MdCancel } from "react-icons/md"; export default function FAQ() { const [query, setQuery] = useState(""); - + + const [activeIndex, setActiveIndex] = useState(null); + const onChangeHandler = (event: React.ChangeEvent) => { setQuery(event.target.value); }; @@ -20,6 +22,11 @@ export default function FAQ() { const searchResults = query ? results.map((result) => result.item) : FAQs; + + const toggleAccordion = (index: number) => { + setActiveIndex(activeIndex === index ? null : index); + }; + return ( <>
@@ -59,21 +66,23 @@ export default function FAQ() { const { question, answer } = FAQ; return (
  • -
    +
    toggleAccordion(i)} + > {question}
    -
    -
      - {answer.map((item) => { - return ( + {activeIndex === i && ( +
      +
        + {answer.map((item, index) => (
      • - ); - })} -
      -
      + ))} +
    +
    + )}
    • ); })} From 46359ba227be1389906964192fc18144d8e58db1 Mon Sep 17 00:00:00 2001 From: mendacium Date: Mon, 18 Dec 2023 18:42:22 +0530 Subject: [PATCH 2/6] updated FAQ page --- src/data/FAQs.ts | 2 +- src/pages/FAQ.tsx | 86 +++++++++++++++++++++++++++++++++++------------ 2 files changed, 65 insertions(+), 23 deletions(-) diff --git a/src/data/FAQs.ts b/src/data/FAQs.ts index 2d3d29fa..c4d2ff9e 100644 --- a/src/data/FAQs.ts +++ b/src/data/FAQs.ts @@ -147,7 +147,7 @@ export const FAQs = [ ], }, { - question: "What to do,if my stats are not being updated?", + question: "What to do, if my stats are not being updated?", answer: [ `Stats are only counted once coding period starts. They are updated periodically and it may take a few hours for them to update. If your stats do not update in a day, contact us at ${KOSS_CONTACT_EMAIL}.`, ], diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index 17ecc010..f3b45dfb 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -7,9 +7,9 @@ import { MdCancel } from "react-icons/md"; export default function FAQ() { const [query, setQuery] = useState(""); - + const [activeIndex, setActiveIndex] = useState(null); - + const onChangeHandler = (event: React.ChangeEvent) => { setQuery(event.target.value); }; @@ -22,7 +22,6 @@ export default function FAQ() { const searchResults = query ? results.map((result) => result.item) : FAQs; - const toggleAccordion = (index: number) => { setActiveIndex(activeIndex === index ? null : index); }; @@ -61,32 +60,75 @@ export default function FAQ() {
    -
      +
      {searchResults.map((FAQ, i) => { const { question, answer } = FAQ; return ( -
    • -
      toggleAccordion(i)} +
      +

      + +

      + +
      - {question} -
      - {activeIndex === i && ( -
      -
        - {answer.map((item, index) => ( -
      • - ))} -
      +
      + {answer.map((item, index) => ( +

      + ))}
      - )} -
      • +
      +
    ); })} - + From d68191830823151816cabec271b3228900d6389f Mon Sep 17 00:00:00 2001 From: mendacium Date: Mon, 18 Dec 2023 23:07:35 +0530 Subject: [PATCH 3/6] updates faq accoridan styling by adding bg color --- src/pages/FAQ.tsx | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index f3b45dfb..204a2c25 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -29,7 +29,7 @@ export default function FAQ() { return ( <>
    -
    +

    Frequently Asked Questions @@ -60,12 +60,12 @@ export default function FAQ() {

    -
    +
    {searchResults.map((FAQ, i) => { const { question, answer } = FAQ; return ( -
    -

    +
    +

    -
    From 22aaa56ef97b0f9af0744e2831929b4945088b92 Mon Sep 17 00:00:00 2001 From: mendacium Date: Mon, 18 Dec 2023 23:30:18 +0530 Subject: [PATCH 4/6] fixed a tailwind className --- src/pages/FAQ.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index 204a2c25..eea8c769 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -29,7 +29,7 @@ export default function FAQ() { return ( <>
    -
    +

    Frequently Asked Questions From cfdc7f72ca9e6efef588e524b9ff3db64410ee77 Mon Sep 17 00:00:00 2001 From: mendacium Date: Wed, 20 Dec 2023 21:23:38 +0530 Subject: [PATCH 5/6] Update FAQ page styling --- src/pages/FAQ.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index eea8c769..5502d3b6 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -108,7 +108,7 @@ export default function FAQ() { id="faqs-text-07" role="region" aria-labelledby="faqs-title-07" - className={`grid text-sm text-slate-600 bg-[#355A6F] rounded-b-xl overflow-hidden transition-all duration-300 ease-in-out ${ + className={`grid text-sm text-slate-600 bg-[#0a2638] rounded-b-xl overflow-hidden transition-all duration-300 ease-in-out ${ activeIndex === i ? "grid-rows-[1fr] opacity-100 pt-5 pb-3 px-3 border-t-4 border-black" : "grid-rows-[0fr] opacity-0" From fe8d30bb4a47eeed20553ae43abadc95bff69c1c Mon Sep 17 00:00:00 2001 From: mendacium Date: Wed, 20 Dec 2023 21:53:39 +0530 Subject: [PATCH 6/6] svg to react-icons for plus minus --- src/pages/FAQ.tsx | 46 ++++++++++++++-------------------------------- 1 file changed, 14 insertions(+), 32 deletions(-) diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx index 5502d3b6..cb7de645 100644 --- a/src/pages/FAQ.tsx +++ b/src/pages/FAQ.tsx @@ -4,6 +4,8 @@ import { FAQs } from "../data/FAQs"; import FooterSection from "../components/FooterSection"; import { IconContext } from "react-icons"; import { MdCancel } from "react-icons/md"; +import { FaPlus } from "react-icons/fa"; +import { FaMinus } from "react-icons/fa"; export default function FAQ() { const [query, setQuery] = useState(""); @@ -64,55 +66,35 @@ export default function FAQ() { {searchResults.map((FAQ, i) => { const { question, answer } = FAQ; return ( -
    -

    +
    +

    {answer.map((item, index) => (