natxocc
59e6d972a8
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
// components/Alert.js
|
|
import { h } from "sigpro";
|
|
import { ui, getIcon } from "../utils.js";
|
|
|
|
/**
|
|
* Alert component
|
|
*
|
|
* daisyUI classes used:
|
|
* - alert, alert-info, alert-success, alert-warning, alert-error
|
|
* - alert-soft, alert-outline, alert-dash
|
|
*/
|
|
export const Alert = (props, children) => {
|
|
const { class: className, actions, type = 'info', soft = true, ...rest } = props;
|
|
|
|
const iconMap = {
|
|
info: "icon-[lucide--info]",
|
|
success: "icon-[lucide--check-circle]",
|
|
warning: "icon-[lucide--alert-triangle]",
|
|
error: "icon-[lucide--alert-circle]",
|
|
};
|
|
|
|
// Build the complete class string
|
|
const typeClass = `alert-${type}`;
|
|
const softClass = soft ? 'alert-soft' : '';
|
|
const allClasses = [typeClass, softClass, className].filter(Boolean).join(' ');
|
|
|
|
const content = children || props.message;
|
|
|
|
return h("div", {
|
|
...rest,
|
|
role: "alert",
|
|
class: ui('alert', allClasses),
|
|
}, () => [
|
|
getIcon(iconMap[type]),
|
|
h("div", { class: "flex-1" }, [
|
|
h("span", {}, [typeof content === "function" ? content() : content])
|
|
]),
|
|
actions ? h("div", { class: "flex-none" }, [
|
|
typeof actions === "function" ? actions() : actions
|
|
]) : null,
|
|
].filter(Boolean));
|
|
}; |