37 lines
786 B
React
37 lines
786 B
React
/**
|
||
* @param {{
|
||
* title: string,
|
||
* children?: React.ReactNode,
|
||
* variant?: "info" | "success" | "warning" | "danger",
|
||
* onDismiss?: () => void
|
||
* }} props
|
||
*/
|
||
export function Alert({
|
||
title,
|
||
children,
|
||
variant = "info",
|
||
onDismiss,
|
||
}) {
|
||
return (
|
||
<section
|
||
className={`ui-alert ui-alert--${variant}`}
|
||
role={variant === "danger" ? "alert" : "status"}
|
||
>
|
||
<div>
|
||
<strong>{title}</strong>
|
||
{children ? <div className="ui-alert__content">{children}</div> : null}
|
||
</div>
|
||
{onDismiss ? (
|
||
<button
|
||
className="ui-alert__dismiss"
|
||
type="button"
|
||
aria-label={`${title} 알림 닫기`}
|
||
onClick={onDismiss}
|
||
>
|
||
×
|
||
</button>
|
||
) : null}
|
||
</section>
|
||
);
|
||
}
|