43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
/**
|
|
* 一个用法示例：标题 + 说明 + 预览区 + 可选代码。
|
|
*
|
|
* 预览区默认横向排列，需要纵向（表单、长文）时传 `layout="column"`。
|
|
*/
|
|
type DemoProps = {
|
|
title: string
|
|
desc?: ReactNode
|
|
/** 展示给使用方的代码片段 */
|
|
code?: string
|
|
layout?: 'row' | 'column'
|
|
/** 灰底预览，用于白色组件（卡片）看得清边界 */
|
|
muted?: boolean
|
|
children: ReactNode
|
|
}
|
|
|
|
export function Demo({ title, desc, code, layout = 'row', muted = false, children }: DemoProps) {
|
|
const previewClasses = [
|
|
'demo-preview',
|
|
layout === 'column' ? 'demo-preview--column' : undefined,
|
|
muted ? 'demo-preview--muted' : undefined,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
|
|
return (
|
|
<article className="demo">
|
|
<h3 className="demo-title">{title}</h3>
|
|
{desc !== undefined && <p className="demo-desc">{desc}</p>}
|
|
|
|
<div className={previewClasses}>{children}</div>
|
|
|
|
{code !== undefined && (
|
|
<pre className="demo-code">
|
|
<code>{code}</code>
|
|
</pre>
|
|
)}
|
|
</article>
|
|
)
|
|
}
|