Dashboard FAQ Accordion Improvements

app/genesis/page.tsx

@@ -41,6 +41,7 @@ import { Progress } from "@/components/ui/progress"
 import { chains } from "@/components/custom/web3-provider"
 import SuccessModal from "@/components/genesis/Success"
 import { MobileResponsiveWrapper } from "@/components/layouts/MobileResponsiveWrapper"
+import { AccordionItem } from "@/components/ui/accordionItem"
 
 // Calculate positions with padding at start/end
 const MILESTONES = projects.map((project, index) => {
@@ -1245,24 +1246,10 @@ export default function GenesisPage() {
               <h2 className="mb-8 text-center text-3xl font-bold text-white">
                 OpenxAI Genesis Event - Frequently Asked Questions
               </h2>
-              <div className="space-y-4">
+              <div className="space-y-2">
                 {FAQS.map((faq, index) => (
-                  <div key={index} className="rounded-lg bg-[#1F2021] p-4">
-                    <button
-                      onClick={() =>
-                        setOpenFaqIndex(openFaqIndex === index ? -1 : index)
-                      }
-                      className="flex w-full justify-between text-left text-lg font-semibold text-white focus:outline-none"
-                    >
-                      <span className="mb-6">{faq.question}</span>
-                      <span>{openFaqIndex === index ? "-" : "+"}</span>
-                    </button>
-                    {openFaqIndex === index && (
-                      <div
-                        dangerouslySetInnerHTML={{ __html: faq.answer }}
-                        className="text-[#6A6A6A]"
-                      />
-                    )}
+                  <div key={index} className="rounded-xl bg-[#1F202170]">
+                    <AccordionItem title={faq.question} description={faq.answer} />
                   </div>
                 ))}
               </div>

components/ui/accordionItem.tsx

@@ -0,0 +1,63 @@
+import React, { useState, ReactNode } from "react";
+// import { cn } from "../utils";
+
+interface AccordionItemProps {
+  title: string;
+  description: string | ReactNode;
+  className?: string;
+  [key: string]: any; // For additional props
+}
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({ 
+  title, 
+  description
+}) => {
+  const [accordionOpen, setAccordionOpen] = useState(false);
+
+  return (
+    <div className={`${accordionOpen && "bg-[#1F2021]"} py-[32px] px-[24px] text-white rounded-lg`}>
+      <button
+        onClick={() => setAccordionOpen(!accordionOpen)}
+        className="flex justify-between w-full font-semibold"
+      >
+        <span className={`${accordionOpen && "fill-white"} text-lg`}>{title}</span>
+        <svg
+          className="fill-white shrink-0 ml-8"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            y="7"
+            width="16"
+            height="2"
+            rx="1"
+            className={`transform origin-center transition duration-200 ease-out ${
+              accordionOpen && "!rotate-180 fill-white"
+            }`}
+          />
+          <rect
+            y="7"
+            width="16"
+            height="2"
+            rx="1"
+            className={`transform origin-center rotate-90 transition duration-200 ease-out ${
+              accordionOpen && "!rotate-180 fill-white"
+            }`}
+          />
+        </svg>
+      </button>
+      <div
+        className={`grid overflow-hidden transition-all duration-300 ease-in-out text-white text-sm ${
+          accordionOpen
+            ? "grid-rows-[1fr] opacity-100"
+            : "grid-rows-[0fr] opacity-0"
+        }`}
+      >
+        <div className={`font-regular text-white overflow-hidden text-left text-md ${accordionOpen && "pt-[16px]"}`}>
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+};

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.