Fix UI dropdown action bug on Frequently asked Questions (#156)

* add function show answer * add function show answer * fix dropdown action bug
keep-starknet-strange · Jun 4, 2024 · e225ffe · e225ffe
1 parent 171e6eb
commit e225ffe
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx
@@ -9,7 +9,7 @@ const Faq: React.FC = () => {
         Frequently asked Questions
       </h2>
       <div className="flex flex-col gap-y-[24px] items-center w-full">
-        <FaqBar question="How do i Join Joyboy?" answer="" />
+        <FaqBar question="How do i Join Joyboy?" answer="Joyboy" />
         <FaqBar question="What kind of contents can i post?" answer="" />
         <FaqBar
           question="How can i contribute to the Joyboy project?"

diff --git a/website/src/components/FaqBar.tsx b/website/src/components/FaqBar.tsx
@@ -4,11 +4,29 @@ type Props = { answer: string; question: string };
 
 const FaqBar: React.FC<Props> = ({ question, answer }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const handleClick = () => {
+    if (isOpen === true) {
+      setIsOpen(false);
+    } else {
+      setIsOpen(true);
+    }
+  };
   return (
-    <div className="py-4 tab:py-[32px] px-3 tab:px-[25px] flex justify-between items-center text-white border-[1px] border-[#C9C9C9] bg-black rounded-xl max-w-[871px] desktop:w-[871px] w-full">
-      <h2 className="desktop:text-[20px] text-xs leading-[28px]">{question}</h2>
-      <img src={downCheveron} alt="" />
-    </div>
+    <>
+      <button
+        onClick={handleClick}
+        className=" py-4 tab:py-[32px] px-3 tab:px-[25px] border-[1px] border-[#C9C9C9]  text-white  bg-black rounded-xl max-w-[871px] desktop:w-[871px] w-full"
+      >
+        <div className=" flex justify-between items-center">
+          <h2 className="desktop:text-[20px] text-xs leading-[28px]">
+            {question}
+          </h2>
+          <img src={downCheveron} alt="" />
+        </div>
+
+        <div>{isOpen ? <p className=" w-full text-start mt-6">{answer}</p> : ""}</div>
+      </button>
+    </>
   );
 };