40 lines
916 B
TypeScript
40 lines
916 B
TypeScript
'use client';
|
||
|
||
import type { ReactNode } from 'react';
|
||
|
||
interface CalloutProps {
|
||
type?: 'note' | 'tip' | 'warning' | 'danger';
|
||
title?: string;
|
||
children: ReactNode;
|
||
}
|
||
|
||
const iconMap: Record<string, string> = {
|
||
note: 'ℹ️',
|
||
tip: '💡',
|
||
warning: '⚠️',
|
||
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">
|
||
{title && (
|
||
<div className="callout-title">
|
||
<span className="callout-icon">{iconMap[type] || iconMap.note}</span>
|
||
<span>{title}</span>
|
||
</div>
|
||
)}
|
||
<div className="callout-content">{children}</div>
|
||
</div>
|
||
);
|
||
}
|