21 lines
882 B
TypeScript
21 lines
882 B
TypeScript
import type { ReactNode } from "react";
|
|
import { IconCheck, IconError, IconInfo, IconWarning } from "./icons.tsx";
|
|
|
|
const ICON = { success: IconCheck, error: IconError, warning: IconWarning, info: IconInfo };
|
|
|
|
export function Notice({ tone, title, children, action }: {
|
|
tone: "success" | "error" | "warning" | "info"; title?: ReactNode; children?: ReactNode; action?: ReactNode;
|
|
}) {
|
|
const I = ICON[tone];
|
|
return (
|
|
<div className={`ui-notice ui-notice--${tone}`} role={tone === "error" || tone === "warning" ? "alert" : "status"}>
|
|
<span className="ui-notice__icon"><I size={16} /></span>
|
|
<div className="ui-notice__body">
|
|
{title && <div className="ui-notice__title">{title}</div>}
|
|
{children && <div className="ui-notice__text">{children}</div>}
|
|
</div>
|
|
{action && <div className="ui-notice__action">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|