Initial commit

frontend/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,60 @@
+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>
+  )
+}