Merge pull request #11

feat(accordion): add icon support and update styling
- Added optional `icon` prop to Accordion component using lucide-react icons
- Updated default image placeholder path in markdown examples and snippets
- Removed unused className prop and adjusted styling classes
- Fixed markdown image paths in documentation files
- Updated docu.json navigation structure and corrected icon name typo

.vscode/image-link.code-snippets

@@ -2,7 +2,7 @@
     "DocuImage": {
       "prefix": "image",
       "body": [
-        "![${1:Alt text for the image}](${2:https://via.placeholder.com/150})"
+        "![${1:Alt text for the image}](${2:/images/example-img.png})"
       ],
       "description": "Snippet untuk menampilkan image komponen."
     },

components/markdown/AccordionMdx.tsx

@@ -2,29 +2,32 @@
 
 import { ReactNode, useState } from 'react';
 import { ChevronRight } from 'lucide-react';
+import * as Icons from "lucide-react";
 import { cn } from '@/lib/utils';
 
 type AccordionProps = {
     title: string;
     children?: ReactNode;
     defaultOpen?: boolean;
-    className?: string;
+    icon?: keyof typeof Icons;
 };
 
-const Accordion = ({
+const Accordion: React.FC<AccordionProps> = ({
     title,
     children,
     defaultOpen = false,
-    className,
+    icon,
 }: AccordionProps) => {
     const [isOpen, setIsOpen] = useState(defaultOpen);
 
+    const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;
+
     return (
-        <div className={cn("border rounded-lg overflow-hidden", className)}>
+        <div className={cn("border rounded-lg overflow-hidden")}>
             <button
                 type="button"
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center my-auto space-x-2 space-y-2 w-full px-4 h-12 transition-colors bg-background dark:hover:bg-muted/50 hover:bg-muted/15"
+                className="flex items-center space-x-2 w-full px-4 h-12 transition-colors bg-background dark:hover:bg-muted/50 hover:bg-muted/15"
             >
                 <ChevronRight
                     className={cn(
@@ -32,7 +35,8 @@ const Accordion = ({
                         isOpen && "rotate-90"
                     )}
                 />
-                <h3 className="font-medium text-base text-foreground pb-2">{title}</h3>
+                {Icon && <Icon className="text-foreground w-4 h-4"/> }
+                <h3 className="font-medium text-base text-foreground m-0">{title}</h3>
             </button>
 
             {isOpen && (

contents/docs/api-reference/delete/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 

contents/docs/api-reference/fetch/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 

contents/docs/api-reference/get/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 

contents/docs/api-reference/post/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 

contents/docs/getting-started/development/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 

contents/docs/getting-started/introduction/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 
@@ -60,4 +60,15 @@ date : 10-12-2024
 image : example-img.png
 ---
   ```
-</Note>
+</Note>
+
+<Accordion title="Code Block" defaultOpen={true} icon="Code">
+    ```javascript:main.js showLineNumbers {3-4}
+    function isRocketAboutToCrash() {
+        // Check if the rocket is stable
+        if (!isStable()) {
+            NoCrash(); // Prevent the crash
+        }
+    }
+    ```
+</Accordion>

contents/docs/getting-started/quick-start-guide/index.mdx

@@ -42,11 +42,11 @@ example note :
 displaying an image in markdown format :
 
 ```plaintext
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 ```
 
 render as :
-![Alt text for the image](https://via.placeholder.com/150)
+![Alt text for the image](/images/example-img.png)
 
 For a complete guide on using markdown content in DocuBook, please refer to the [Components](https://docubook.pro/docs/components) page.
 

docu.json

@@ -70,14 +70,7 @@
               "items": [
                       { "title": "Introduction", "href": "/introduction" },
                       { "title": "Quick Start Guide", "href": "/quick-start-guide" },
-                      { "title": "Development", "href": "/development" },
+                      { "title": "Development", "href": "/development" }
-                      {
-                              "title": "Config",
-                              "href": "/config",
-                              "items": [
-                                      { "title": "Sub Config", "href": "/subconfig" }
-                              ]
-                      }
               ]
       },
       {
@@ -98,10 +91,10 @@
       },
       {
       "title": "Changelog",
-      "href": "/Changelog",
+      "href": "/changelog",
       "noLink": true,
       "context": {
-              "icon": "Hystory",
+              "icon": "History",
               "description": "Update and Changes",
               "title": "Release"
               },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "private": true,
   "scripts": {
     "dev": "next dev",