shelving
Version:
Toolkit for using data in JavaScript.
14 lines (13 loc) • 955 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BLOCK_CLASS } from "../block/Block.js";
import { StatusIcon } from "../misc/StatusIcon.js";
import { getColorClass } from "../style/Color.js";
import { getFlexClass } from "../style/Flex.js";
import { getStatusClass } from "../style/Status.js";
import { getClass, getModuleClass } from "../util/css.js";
import NOTICE_CSS from "./Notice.module.css";
export function Notice({ children, status = children ? "info" : "loading", icon = _jsx(StatusIcon, { status: status }), ...variants }) {
return (_jsxs("aside", { role: status === "danger" || status === "error" ? "alert" : "status", className: getClass(BLOCK_CLASS, getModuleClass(NOTICE_CSS, "notice", variants), getFlexClass(variants), getStatusClass(status), // Notices have status colours.
getColorClass(variants)), children: [icon, children] }));
}
export const LOADING_NOTICE = _jsx(Notice, { status: "loading" });