From 671f29b66ac01b1acd3548aa4875144a9b537196 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 27 Mar 2025 13:31:30 +0800
Subject: [PATCH] feat(mdx/content): add AccordionComponent for collapsible
 sections with lightbulb icon

---
 src/components/content/accordion.tsx | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/content/accordion.tsx

diff --git a/src/components/content/accordion.tsx b/src/components/content/accordion.tsx
new file mode 100644
index 0000000..1cfecfd
--- /dev/null
+++ b/src/components/content/accordion.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { LightbulbIcon } from "lucide-react";
+
+interface AccordionProps {
+  title: string;
+  children: ReactNode;
+}
+
+export const AccordionComponent = ({ title, children }: AccordionProps) => {
+  return (
+    <Accordion type="single" collapsible>
+      <AccordionItem value={title}>
+        <AccordionTrigger className="py-0">
+          <div className="flex items-center gap-2">
+            <div className="h-5 w-5 p-0.5">
+              <LightbulbIcon className="h-4 w-4" />
+            </div>
+            {title}
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="pl-7 pb-0">{children}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};