61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
export type MarkdownRendererProps = {
|
|
title?: string
|
|
kicker?: string
|
|
}
|
|
|
|
export function MarkdownRenderer({
|
|
title = 'Quiet power, shipped weekly.',
|
|
kicker = 'NORTHSTAR / RELEASE NOTES',
|
|
}: MarkdownRendererProps) {
|
|
return (
|
|
<div className="markdown-card">
|
|
<div className="markdown-toolbar">
|
|
<span className="eyebrow">Preview</span>
|
|
<span className="mono muted">release-notes.md</span>
|
|
</div>
|
|
|
|
<article className="markdown-body">
|
|
<span className="md-kicker">{kicker}</span>
|
|
<h3>{title}</h3>
|
|
<p>Our components help teams move quickly without making the interface feel rushed.</p>
|
|
|
|
<div className="md-callout">
|
|
<span className="callout-mark">✦</span>
|
|
<p>
|
|
<strong>New in 0.8.2</strong>
|
|
<br />
|
|
Button focus rings now respect your theme while keeping a dependable contrast ratio.
|
|
</p>
|
|
</div>
|
|
|
|
<h4>What changed</h4>
|
|
<ul>
|
|
<li>
|
|
Added <code>accent-subtle</code> surface token
|
|
</li>
|
|
<li>Improved keyboard navigation in menus</li>
|
|
<li>Reduced layout shift during loading states</li>
|
|
</ul>
|
|
|
|
<div className="md-table">
|
|
<div>
|
|
<span>Token</span>
|
|
<span>Value</span>
|
|
<span>Role</span>
|
|
</div>
|
|
<div>
|
|
<code>surface-1</code>
|
|
<span>#111118</span>
|
|
<span>Elevated panels</span>
|
|
</div>
|
|
<div>
|
|
<code>accent</code>
|
|
<span className="md-accent">#A69BFF</span>
|
|
<span>Interactive focus</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
)
|
|
}
|