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
87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { Spinner } from "@medusajs/icons"
|
|
import { Tabs, clx } from "@medusajs/ui"
|
|
import { CodeBlock } from "docs-ui"
|
|
import * as React from "react"
|
|
|
|
import Feedback from "@/components/Feedback"
|
|
import { ExampleRegistry } from "@/specs/examples.mjs"
|
|
|
|
interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
name: string
|
|
disableCenterAlignPreview?: boolean
|
|
hideFeedback?: boolean
|
|
}
|
|
|
|
export function ComponentExample({
|
|
children,
|
|
name,
|
|
disableCenterAlignPreview = false,
|
|
hideFeedback = false,
|
|
...props
|
|
}: ComponentExampleProps) {
|
|
const Preview = React.useMemo(() => {
|
|
const Component = ExampleRegistry[name]?.component
|
|
|
|
if (!Component) {
|
|
return <p>Component {name} not found in registry</p>
|
|
}
|
|
|
|
return <Component />
|
|
}, [name])
|
|
|
|
const CodeElement = children as React.ReactElement
|
|
const Code = JSON.parse(
|
|
(CodeElement.props as Record<string, string>).codeLinesJSON
|
|
).join("\n")
|
|
|
|
return (
|
|
<div className="relative my-4 flex flex-col space-y-2" {...props}>
|
|
<Tabs defaultValue="preview" className="relative mr-auto w-full">
|
|
<div className="flex flex-col pb-3">
|
|
<Tabs.List>
|
|
<Tabs.Trigger value="preview">Preview</Tabs.Trigger>
|
|
<Tabs.Trigger value="code">Code</Tabs.Trigger>
|
|
</Tabs.List>
|
|
<Tabs.Content
|
|
value="preview"
|
|
className="relative data-[state=active]:mt-4"
|
|
>
|
|
<div
|
|
className={clx(
|
|
"bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
|
|
"w-full overflow-auto justify-center rounded-md border px-10 py-5",
|
|
!disableCenterAlignPreview && "items-center"
|
|
)}
|
|
>
|
|
<React.Suspense
|
|
fallback={
|
|
<div className="text-medusa-fg-muted flex items-center text-sm">
|
|
<Spinner className="animate-spin" />
|
|
</div>
|
|
}
|
|
>
|
|
{Preview}
|
|
</React.Suspense>
|
|
</div>
|
|
</Tabs.Content>
|
|
<Tabs.Content
|
|
value="code"
|
|
className="relative data-[state=active]:mt-4"
|
|
>
|
|
<CodeBlock source={Code} lang="tsx" />
|
|
</Tabs.Content>
|
|
</div>
|
|
</Tabs>
|
|
{!hideFeedback && (
|
|
<Feedback
|
|
title={`example ${name}`}
|
|
question="Was this example helpful?"
|
|
showDottedSeparator={false}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|