Update QuestionBox.js

Author: gholi-dev

src/components/Common/QuestionBox.js

@@ -1,29 +1,30 @@
 import React, { useState } from "react";
 import clsx from "clsx";
 import Section from "./section";
-import { GoChevronDown } from "react-icons/go";
+import { GoChevronDown, GoDiscussionClosed } from "react-icons/go";
 
 const QuestionBox = ({ id, question, answer }) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <Section
+    <div
       id={id}
-      title=""
-      as="section"
-      headingTag="h3"
       className={clsx(
-        "p-6 rounded-2xl border transition-all shadow-sm hover:shadow-md cursor-pointer",
-        "border-black/10 bg-white", // light
+        "p-4 rounded-lg mt-4 border transition-all  cursor-pointer",
+        "border-black/10 ", // light
         "dark:border-white/10 dark:bg-[#1e1e1e]" // dark
       )}
     >
-      {/* Header row */}
       <div
         onClick={() => setOpen(!open)}
         className="flex items-center justify-between select-none"
       >
-        <h3 className="text-lg font-semibold">{question}</h3>
+        <div className="flex items-center gap-3">
+          <div className="bg-[#222] text-sm h-max w-max text-white p-1 rounded-md">
+            <GoDiscussionClosed className="" />
+          </div>
+          <h3 className="text-base border-r border-[#bababa88] px-3">{question}</h3>
+        </div>
         <GoChevronDown
           className={clsx(
             "w-5 h-5 transition-transform duration-300",
@@ -32,7 +33,6 @@ const QuestionBox = ({ id, question, answer }) => {
         />
       </div>
 
-      {/* Answer (animated) */}
       <div
         className={clsx(
           "overflow-hidden transition-all duration-500 ease-in-out",
@@ -49,7 +49,7 @@ const QuestionBox = ({ id, question, answer }) => {
           {answer}
         </div>
       </div>
-    </Section>
+    </div>
   );
 };