42 lines
958 B
TypeScript
42 lines
958 B
TypeScript
'use client';
|
|
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface CalloutProps {
|
|
type?: 'note' | 'tip' | 'warning' | 'danger';
|
|
title?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
const tagMap: Record<string, string> = {
|
|
note: 'NOTE',
|
|
tip: 'TIP',
|
|
warning: 'WARNING',
|
|
danger: 'DANGER',
|
|
};
|
|
|
|
const typeClasses: Record<string, string> = {
|
|
note: 'callout-note',
|
|
tip: 'callout-tip',
|
|
warning: 'callout-warning',
|
|
danger: 'callout-danger',
|
|
};
|
|
|
|
export function Callout({ type = 'note', title, children }: CalloutProps) {
|
|
const className = `callout ${typeClasses[type] || typeClasses.note}`;
|
|
|
|
return (
|
|
<div className={className} role="note">
|
|
<div className="callout-title">
|
|
<span className="text-[11px] font-mono tracking-[0.16em]">
|
|
{tagMap[type] || tagMap.note}
|
|
</span>
|
|
{title && (
|
|
<span>{title}</span>
|
|
)}
|
|
</div>
|
|
<div className="callout-content">{children}</div>
|
|
</div>
|
|
);
|
|
}
|