import React from "react"
import * as cn from "./Callout.styles";
/**
* Props for the Callout component
*/
export interface CalloutProps {
/** Additional CSS class name to be applied to the callout */
className?: string;
/** Content to be displayed inside the callout */
children: React.ReactNode;
kind?: "warning" | "note" | "tip" | "check" | "danger"
}
/**
* A Callout component that displays important information or notices in a visually distinct way.
* It includes an info icon and a message area for content.
*
* @category Component
*/
export function Callout({ className, children, kind }: CalloutProps) {
let icon
switch (kind) {
case "tip":
icon = <$BulbIcon />
break
case "check":
icon = <$CheckIcon />
break
case "warning":
icon = <$WarningIcon />
break
case "danger":
icon = <$DangerIcon />
break
case "note":
icon = <$NoteIcon />
break
default:
icon = <$IconInfo />
break
}
return
{icon}
{children}
}
function $IconInfo() {
return
}
function $BulbIcon() {
return
}
function $CheckIcon() {
return
}
function $WarningIcon() {
return
}
function $DangerIcon() {
return
}
function $NoteIcon() {
return
}