From 978d7143b5a69d8a6e3227b1af4c0416d10621c4 Mon Sep 17 00:00:00 2001
From: ickah <barukab68@gmail.com>
Date: Tue, 4 Jun 2024 13:16:38 +0200
Subject: [PATCH 1/3] add function show answer

---
 website/src/components/Faq.tsx    |  2 +-
 website/src/components/FaqBar.tsx | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx
index 267a9ad2..91657377 100644
--- 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="yes am ben baruka" />
         <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
index 4eef63b9..c6a6afa6 100644
--- a/website/src/components/FaqBar.tsx
+++ b/website/src/components/FaqBar.tsx
@@ -4,11 +4,26 @@ 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}>
+        <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>
+
+        <div>{isOpen ? <p>{answer}</p> : ""}</div>
+      </button>
+    </>
   );
 };
 

From 483387524fefe64012a23102d8d39a1e466a5263 Mon Sep 17 00:00:00 2001
From: ickah <barukab68@gmail.com>
Date: Tue, 4 Jun 2024 13:20:40 +0200
Subject: [PATCH 2/3] add function show answer

---
 website/src/components/FaqBar.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/components/FaqBar.tsx b/website/src/components/FaqBar.tsx
index c6a6afa6..d86a88b8 100644
--- a/website/src/components/FaqBar.tsx
+++ b/website/src/components/FaqBar.tsx
@@ -13,15 +13,18 @@ const FaqBar: React.FC<Props> = ({ question, answer }) => {
   };
   return (
     <>
-      <button onClick={handleClick}>
-        <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">
+      <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>{answer}</p> : ""}</div>
+        <div>{isOpen ? <p className=" w-full text-start mt-6">{answer}</p> : ""}</div>
       </button>
     </>
   );

From 0c014b3cd677d21ea7e8b459d963601d923cdeb0 Mon Sep 17 00:00:00 2001
From: ickah <barukab68@gmail.com>
Date: Tue, 4 Jun 2024 13:24:18 +0200
Subject: [PATCH 3/3] fix dropdown action bug

---
 website/src/components/Faq.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx
index 91657377..2ed94b84 100644
--- 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="yes am ben baruka" />
+        <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?"