update documentations

contents/docs/components/accordion/index.mdx

@@ -4,41 +4,55 @@ description: A component used to create collapsible content that can be hidden a
 date: 22-12-2024
 ---
 
-The Accordion component is a collapsible content container that can be used to hide and show content again. It is a flexible component that can be used to display any content, including HTML elements, markdown components, and plain text.
-
 ## Preview
 
-### Code Block
+### Basic Usage
 
-<Accordion title="Code Block" defaultOpen={true}>
-    ```javascript:main.js showLineNumbers {3-4}
-    function isRocketAboutToCrash() {
-        // Check if the rocket is stable
-        if (!isStable()) {
-            NoCrash(); // Prevent the crash
-        }
+<Accordion title="Click to expand" defaultOpen={true}>
+    This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
+</Accordion>
+
+### With Code Block
+
+<Accordion title="Code Example" className="mt-4">
+    ```javascript:utils.js showLineNumbers
+    // Example of using the Accordion component
+    import Accordion from '@/components/markdown/AccordionMdx';
+
+    function Example() {
+        return (
+            <Accordion title="Click to see code">
+                <pre>
+                    {`function greet() {\n    console.log('Hello, world!');\n}`}
+                </pre>
+            </Accordion>
+        );
     }
     ```
 </Accordion>
 
-### Text with Markdown
+### With Markdown Content
 
-<Accordion title="Markdown">
-    this is an example of plain text content from the accordion component and below is markdown ;
-    1. number one
-    2. number two
-    3. number three
+<Accordion title="Markdown Example" className="mt-4">
+    ## This is a markdown heading
+
+    - List item 1
+    - List item 2
+    - List item 3
+
+    You can include **bold** and *italic* text, [links](#), and other markdown elements.
 </Accordion>
 
 ## Props
 
-| Prop          | Type      | Default        | Description                                                                            |
-| ------------- | --------- | -------------- | -------------------------------------------------------------------------------------- |
-| `title`       | `string`  | `null`         | The value of Accordion title.                                                          |
-| `children`     | `ReactNode`  | `null`         | Flexible content, both HTML elements, markdown componenst and plain text.                                   |
-| `defaultOpen` | `boolean` | `false`        | You can change the value to `true` if you want the content to open when the page loads |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | string | - | **Required**. The text displayed in the accordion header. |
+| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
+| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
+| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
 
-## Code
+## Output Markdown
 
 <Tabs defaultValue="markdown" className="pt-5 pb-1">
   <TabsList>