Tong/362 faq

src/app/components/FAQ/FAQ.tsx

@@ -1,3 +1,5 @@
+import { Heading } from "@babylonlabs-io/bbn-core-ui";
+
 import { getNetworkConfig } from "@/config/network.config";
 
 import { questions } from "./data/questions";
@@ -12,8 +14,10 @@ export const FAQ: React.FC<FAQProps> = () => {
 
   return (
     <div className="container mx-auto flex flex-col gap-2 p-6">
-      <h3 className="mb-4 font-bold">FAQ</h3>
-      <div className="flex flex-col gap-4">
+      <Heading as="h3" variant="h4" className="mb-8">
+        FAQ’s
+      </Heading>
+      <div className="flex flex-col gap-4 bg-warning-contrast border border-primary-light/20 rounded divide-y p-6">
         {questions(coinName, networkName, confirmationDepth).map((question) => (
           <Section
             key={question.title}

src/app/components/FAQ/Section.tsx

@@ -1,37 +1,40 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { useState } from "react";
-import { FaMinus, FaPlus } from "react-icons/fa";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Heading,
+  Text,
+} from "@babylonlabs-io/bbn-core-ui";
+import { ReactNode } from "react";
+import { AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
 
 interface SectionProps {
   title: string;
-  content: string;
+  content: ReactNode;
 }
 
 export const Section: React.FC<SectionProps> = ({ title, content }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
-    <div
-      className="card cursor-pointer border bg-base-300 p-4 dark:border-0"
-      onClick={() => setIsOpen(!isOpen)}
-    >
-      <div className="flex items-center justify-between">
-        <h4 className="font-bold">{title}</h4>
-        <button className="btn btn-square btn-sm border border-neutral-content bg-transparent">
-          {isOpen ? <FaMinus /> : <FaPlus />}
-        </button>
-      </div>
-      <AnimatePresence>
-        {isOpen && (
-          <motion.p
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="mt-4"
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
-        )}
-      </AnimatePresence>
+    <div className="border-primary-light/20 pt-6 first:pt-0 pb-2 first:pb-0">
+      <Accordion className="text-primary-dark">
+        <AccordionSummary
+          className="p-2 text-xl flex justify-between"
+          renderIcon={(expanded) =>
+            expanded ? (
+              <AiOutlineMinus size={24} />
+            ) : (
+              <AiOutlinePlus size={24} />
+            )
+          }
+        >
+          <Heading variant="h6">
+            <span className="align-middle">{title}</span>
+          </Heading>
+        </AccordionSummary>
+        <AccordionDetails className="p-2" unmountOnExit>
+          <Text>{content}</Text>
+        </AccordionDetails>
+      </Accordion>
     </div>
   );
 };