devpage 0.2.2

Live documents from a repository: sites, docs and slides from Markdown, and UI designs drawn from code — with comments, link checking and PDF
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// A highlighted box: note (default), tip, warning or danger, with an optional title.
const icons: Record<string, string> = { note: "ℹ", tip: "✓", warning: "!", danger: "✕" };

export default function Callout({ kind = "note", title, children }: { kind?: string; title?: string; children?: any }) {
  return (
    <aside className={`callout callout-${kind}`}>
      <div className="callout-head">
        <span className="callout-icon" aria-hidden="true">{icons[kind] ?? icons.note}</span>
        {title ? <strong>{title}</strong> : null}
      </div>
      <div className="callout-body">{children}</div>
    </aside>
  );
}