51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import { $html } from "sigpro";
|
|
import { val } from "../core/utils.js";
|
|
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
|
|
|
|
/** ALERT */
|
|
export const Alert = (props, children) => {
|
|
const { type = "info", soft = true, ...rest } = props;
|
|
|
|
const icons = {
|
|
info: iconInfo,
|
|
success: iconSuccess,
|
|
warning: iconWarning,
|
|
error: iconError,
|
|
};
|
|
|
|
const typeClass = () => {
|
|
const t = val(type);
|
|
const map = {
|
|
info: "alert-info",
|
|
success: "alert-success",
|
|
warning: "alert-warning",
|
|
error: "alert-error",
|
|
};
|
|
return map[t] || t;
|
|
};
|
|
|
|
const content = children || props.message;
|
|
|
|
return $html(
|
|
"div",
|
|
{
|
|
...rest,
|
|
role: "alert",
|
|
class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
|
|
},
|
|
[
|
|
$html("img", {
|
|
src: icons[val(type)] || icons.info,
|
|
class: "w-4 h-4 object-contain",
|
|
alt: val(type),
|
|
}),
|
|
$html("div", { class: "flex-1" }, [
|
|
$html("span", {}, [typeof content === "function" ? content() : content])
|
|
]),
|
|
props.actions ? $html("div", { class: "flex-none" }, [
|
|
typeof props.actions === "function" ? props.actions() : props.actions
|
|
]) : null,
|
|
],
|
|
);
|
|
};
|