d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
98 lines
1.9 KiB
Plaintext
98 lines
1.9 KiB
Plaintext
---
|
|
generate_toc: true
|
|
---
|
|
|
|
import { ComponentExample } from "@/components/ComponentExample"
|
|
import { ComponentReference } from "@/components/ComponentReference"
|
|
|
|
export const metadata = {
|
|
title: `Code Block`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
A component for displaying code snippets with syntax highlighting and copy functionality.
|
|
|
|
In this guide, you'll learn how to use the Code Block component.
|
|
|
|
<ComponentExample name="code-block-demo" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { CodeBlock } from "@medusajs/ui"
|
|
```
|
|
|
|
```tsx
|
|
<CodeBlock
|
|
snippets={[
|
|
{
|
|
language: "tsx",
|
|
label: "Label",
|
|
code: "import { useProduct } from \"medusa-react\"",
|
|
},
|
|
]}
|
|
>
|
|
<CodeBlock.Header />
|
|
<CodeBlock.Body />
|
|
</CodeBlock>
|
|
```
|
|
|
|
---
|
|
|
|
## API Reference
|
|
|
|
<ComponentReference mainComponent="CodeBlock" componentsToShow={[
|
|
"CodeBlock",
|
|
"CodeBlock.Header",
|
|
"CodeBlock.Header.Meta",
|
|
"CodeBlock.Body"
|
|
]} />
|
|
|
|
---
|
|
|
|
## Usage Outside Medusa Admin
|
|
|
|
If you're using the `CodeBlock` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `CodeBlock.Header` component uses a [Tooltip](../tooltip/page.mdx#usage-outside-medusa-admin):
|
|
|
|
```tsx
|
|
<TooltipProvider>
|
|
<CodeBlock
|
|
snippets={[
|
|
{
|
|
language: "tsx",
|
|
label: "Label",
|
|
code: "import { useProduct } from \"medusa-react\"",
|
|
},
|
|
]}
|
|
>
|
|
<CodeBlock.Header />
|
|
<CodeBlock.Body />
|
|
</CodeBlock>
|
|
</TooltipProvider>
|
|
```
|
|
|
|
---
|
|
|
|
## Examples
|
|
|
|
### Single Snippet
|
|
|
|
If you want to only show a code sample for one language or API, you can choose to hide the snippet labels:
|
|
|
|
<ComponentExample name="code-block-single" />
|
|
|
|
### No Header
|
|
|
|
You can also omit the header entirely:
|
|
|
|
<ComponentExample name="code-block-no-header" />
|
|
|
|
### No Line Numbers
|
|
|
|
<ComponentExample name="code-block-no-lines" />
|
|
|
|
### No Copy Button
|
|
|
|
<ComponentExample name="code-block-no-copy" hideFeedback />
|