adds accordion logic

Author: avb-is-me

docs/starter-template/components/DevDocsAccordion.md

@@ -34,6 +34,16 @@ Accordion returns a React component that renders an accordion UI element.
 </Accordion>
 ```
 
+<Accordion title="Click me to expand">
+  This is the content that will be shown when the accordion is expanded.
+  
+  You can include any markdown content here.
+  - List items
+  - More items
+  
+  Or even code blocks!
+</Accordion>
+
 ## Notes or Considerations
 
 * The accordion is collapsible by default, meaning it can be opened and closed by clicking on the title.

src/components/ui/accordion.jsx

@@ -5,13 +5,19 @@ import { unified } from 'unified';
 import markdown from 'remark-parse';
 import remark2rehype from 'remark-rehype';
 import rehype2react from 'rehype-react';
+import * as runtime from 'react/jsx-runtime';
 
 import { cn } from "@site/src/utils"
 
 const processor = unified()
   .use(markdown)
   .use(remark2rehype)
-  .use(rehype2react, { createElement: React.createElement });
+  .use(rehype2react, { 
+    createElement: React.createElement,
+    Fragment: React.Fragment,
+    jsx: runtime.jsx,
+    jsxs: runtime.jsxs
+  });
 
 const Accordion = AccordionPrimitive.Root
 

src/theme/MDXComponents/index.js

@@ -1,12 +1,21 @@
 import React from 'react';
 import MDXComponents from '@theme-original/MDXComponents';
-import Parser from '@site/src/components/Parser';
+
 import CodeSnippets from '@site/src/components/CodeSnippets';
 import InfoBox from '@site/src/components/InfoBox';
 
+import { DevDocsCard } from '@site/src/components/ui/card';
+import { DevDocsAccordion } from '@site/src/components/ui/accordion';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@site/src/components/ui/tabs.jsx';
+
 export default {
   ...MDXComponents,
   CodeSnippets,
   InfoBox,
-  Parser,
+  Card: DevDocsCard,
+  Accordion: DevDocsAccordion,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
 };