Markdown Guide:

This guide covers the necessary markdown elements and custom components used in this project.

You can use different headings using the standard markdown like this

## Headings
# Heading 1
## Heading 2
### Heading 3

The result looks like below

Headings

Heading 1

Heading 2

Heading 3

The Lists can be used like this

## Lists
### Unordered List
- Item 1
  - Nested Item 1.1
  - Nested Item 1.2
- Item 2
### Ordered List
1. Step 1
2. Step 2
   1. Sub-step 2.1

Lists

Unordered List

• Item 1
  • Nested Item 1.1
  • Nested Item 1.2
• Item 2

Ordered List

1. Step 1
2. Step 2
   1. Sub-step 2.1

Blockquotes can be used like this

## Blockquotes
> This is a blockquote. Blockquotes are useful for highlighting quotes or key information.

Blockquotes

This is a blockquote. Blockquotes are useful for highlighting quotes or key information. The usage of Code Blocks with line numbers is as follows

## Code Blocks
Here’s an example of a code block with line numbers:
```javascript {showLineNumbers=true}
function helloWorld() {
  console.log("Hello, world!");
}```

Code Blocks

Here’s an example of a code block with line numbers:

function helloWorld() {
  console.log("Hello, world!");
}

Custom Components Guide:

Tabs Component

Overview

The Tabs component is used to organize content into multiple sections, each with its own tab. It's commonly used for displaying different categories of content or settings in a compact and organized manner.

Features:

• Supports multiple tabs with customizable content.
• Easy switching between tabs.
• Customizable active and inactive tab styles.

Props

Prop	Type	Description
tabs	array	An array of tab objects, each containing a label and content.
activeTab	number	The index of the currently active tab.
onTabChange	function	Callback function triggered when a tab is changed.
className	string	Optional additional classes for styling the tabs container.

Usage

Here’s an example of how to use the Tabs component:

import Tabs from "@/components/UI/Tabs";

const tabs = [
  { label: "Tab 1", content: "This is the content for tab 1" },
  { label: "Tab 2", content: "This is the content for tab 2" },
  { label: "Tab 3", content: "This is the content for tab 3" },
];

<Tabs
  tabs={tabs}
  activeTab={0}
  onTabChange={(tabIndex) => console.log("Tab changed:", tabIndex)}
/>;

Note Component

Overview

The Note component is used to display informational or warning messages in the documentation or UI. It helps to highlight important notes, tips, or warnings for the user.

Features:

• Customizable for different types of notes (e.g., info, warning, success).
• Supports rich text or markdown content inside the note.
• Can be styled to match the theme of the application.

Props

Prop	Type	Description
type	string	Defines the type of note (e.g., "info", "warning", "success").
children	ReactNode	The content to be displayed inside the note.
className	string	Optional additional classes for styling the note container.

Usage

Here’s an example of how to use the Note component:

import Note from "@/components/Note";

<Note type="info">This is an informational note for the user.</Note>;

Stepper Component

Overview

The Stepper component is used to break down complex workflows or processes into smaller steps, providing a visual representation of progress. It is ideal for forms, multi-step wizards, or onboarding processes.

Features:

• Displays multiple steps with optional labels.
• Can be horizontal or vertical.
• Supports custom actions for each step (e.g., next, previous).

Props

Prop	Type	Description
steps	array	An array of step objects, each containing a label and optional content.
currentStep	number	The index of the current active step.
onStepChange	function	Callback function triggered when the step is changed.
className	string	Optional additional classes for styling the stepper container.

Usage

Here’s an example of how to use the Stepper component:

import Stepper from "@/components/UI/Stepper";

const steps = [
  { label: "Step 1", content: "This is the content for step 1" },
  { label: "Step 2", content: "This is the content for step 2" },
  { label: "Step 3", content: "This is the content for step 3" },
];

<Stepper
  steps={steps}
  currentStep={1}
  onStepChange={(step) => console.log("Step changed:", step)}
/>;

Images

You can easily add images to your documentation using standard markdown syntax:

![Alt Text](path-to-image)

Links

Adding links is straightforward. Use the markdown syntax for links:

[Link Text](https://example.com)

Link Text