From bcafa9b5d9dc62d397eea1d60a7a4036f7234c3f Mon Sep 17 00:00:00 2001 From: gitfromwildan <> Date: Fri, 30 May 2025 17:23:02 +0700 Subject: [PATCH] update documentations --- contents/docs/components/accordion/index.mdx | 58 ++++++++++++------- contents/docs/components/button/index.mdx | 24 ++++---- contents/docs/components/card-group/index.mdx | 6 +- contents/docs/components/card/index.mdx | 14 ++--- contents/docs/components/code-block/index.mdx | 6 +- contents/docs/components/file-tree/index.mdx | 6 +- contents/docs/components/keyboard/index.mdx | 6 +- contents/docs/components/note/index.mdx | 10 ++-- .../docs/components/release-note/index.mdx | 4 +- contents/docs/components/stepper/index.mdx | 6 +- contents/docs/components/tabs/index.mdx | 8 +-- contents/docs/components/tooltips/index.mdx | 2 +- contents/docs/components/youtube/index.mdx | 12 ++-- contents/docs/getting-started/index.mdx | 9 +++ 14 files changed, 92 insertions(+), 79 deletions(-) create mode 100644 contents/docs/getting-started/index.mdx diff --git a/contents/docs/components/accordion/index.mdx b/contents/docs/components/accordion/index.mdx index b09606e..fbc1343 100644 --- a/contents/docs/components/accordion/index.mdx +++ b/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 - - ```javascript:main.js showLineNumbers {3-4} - function isRocketAboutToCrash() { - // Check if the rocket is stable - if (!isStable()) { - NoCrash(); // Prevent the crash - } + + 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. + + +### With Code Block + + + ```javascript:utils.js showLineNumbers + // Example of using the Accordion component + import Accordion from '@/components/markdown/AccordionMdx'; + + function Example() { + return ( + + 
+                    {`function greet() {\n    console.log('Hello, world!');\n}`}
+
+ + ); } ``` -### Text with Markdown +### With Markdown Content - - 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 + + ## 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. ## 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 diff --git a/contents/docs/components/button/index.mdx b/contents/docs/components/button/index.mdx index 68d6af6..a26749a 100644 --- a/contents/docs/components/button/index.mdx +++ b/contents/docs/components/button/index.mdx @@ -4,14 +4,12 @@ description: A component used to create buttons that can be used to trigger acti date: 14-12-2024 --- -The Button component is a component used to create buttons that can be used to trigger actions or navigate to other pages. - ## Preview