docs: fix no lines code block example (#12259)
This commit is contained in:
@@ -67,6 +67,7 @@ const Row = ({ value, type, description }: HookData) => {
|
||||
<Tooltip
|
||||
tooltipChildren={<pre>{type.shape}</pre>}
|
||||
className="font-mono max-w-[500px]"
|
||||
tooltipClassName="!text-left"
|
||||
>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<span>{type.name}</span>
|
||||
|
||||
@@ -165,6 +165,7 @@ const Row = ({
|
||||
<Tooltip
|
||||
tooltipChildren={<pre>{typeNode.tooltipContent}</pre>}
|
||||
className="font-mono !max-w-none"
|
||||
tooltipClassName="!text-left"
|
||||
>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<code>{typeNode.text}</code>
|
||||
|
||||
@@ -83,3 +83,7 @@ You could also choose to omit the header entirely:
|
||||
### No Line Numbers
|
||||
|
||||
<ComponentExample name="code-block-no-lines" />
|
||||
|
||||
### No Copy Button
|
||||
|
||||
<ComponentExample name="code-block-no-copy" />
|
||||
|
||||
25
www/apps/ui/src/examples/code-block-no-copy.tsx
Normal file
25
www/apps/ui/src/examples/code-block-no-copy.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { CodeBlock, Label } from "@medusajs/ui"
|
||||
|
||||
const snippets = [
|
||||
{
|
||||
label: "Medusa JS SDK",
|
||||
language: "jsx",
|
||||
code: `// Install the JS SDK in your storefront project: @medusajs/js-sdk\n\nimport Medusa from "@medusajs/js-sdk"\n\nconst medusa = new Medusa({\n baseUrl: import.meta.env.NEXT_PUBLIC_BACKEND_URL || "/",\n publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PAK\n})\nconst { product } = await medusa.store.products.retrieve("prod_123")\nconsole.log(product.id)`,
|
||||
hideCopy: true,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CodeBlockNoCopy() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<CodeBlock snippets={snippets}>
|
||||
<CodeBlock.Header>
|
||||
<CodeBlock.Header.Meta>
|
||||
<Label weight={"plus"}>/product-detail.js</Label>
|
||||
</CodeBlock.Header.Meta>
|
||||
</CodeBlock.Header>
|
||||
<CodeBlock.Body />
|
||||
</CodeBlock>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -5,6 +5,7 @@ const snippets = [
|
||||
label: "Medusa JS SDK",
|
||||
language: "jsx",
|
||||
code: `// Install the JS SDK in your storefront project: @medusajs/js-sdk\n\nimport Medusa from "@medusajs/js-sdk"\n\nconst medusa = new Medusa({\n baseUrl: import.meta.env.NEXT_PUBLIC_BACKEND_URL || "/",\n publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PAK\n})\nconst { product } = await medusa.store.products.retrieve("prod_123")\nconsole.log(product.id)`,
|
||||
hideLineNumbers: true,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -735,6 +735,11 @@ export const ExampleRegistry: ExampleRegistryType = {
|
||||
),
|
||||
file: "src/examples/code-block-no-header.tsx",
|
||||
},
|
||||
"code-block-no-copy": {
|
||||
name: "code-block-no-copy",
|
||||
component: React.lazy(async () => import("@/examples/code-block-no-copy")),
|
||||
file: "src/examples/code-block-no-copy.tsx",
|
||||
},
|
||||
"container-layout": {
|
||||
name: "container-layout",
|
||||
component: React.lazy(async () => import("@/examples/container-layout")),
|
||||
|
||||
Reference in New Issue
Block a user