{children}
;
};
export const Aside = ({type = "note", title = "", icon = "", iconType = "regular", children}) => {
const asideVariants = ["note", "tip", "caution", "danger"];
const asideComponents = {
note: {
outerStyle: "border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10",
innerStyle: "text-sky-900 dark:text-sky-200",
calloutType: "note",
icon:
},
tip: {
outerStyle: "border-emerald-500/20 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/10",
innerStyle: "text-emerald-900 dark:text-emerald-200",
calloutType: "tip",
icon:
},
caution: {
outerStyle: "border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10",
innerStyle: "text-amber-900 dark:text-amber-200",
calloutType: "warning",
icon:
},
danger: {
outerStyle: "border-red-500/20 bg-red-50/50 dark:border-red-500/30 dark:bg-red-500/10",
innerStyle: "text-red-900 dark:text-red-200",
calloutType: "danger",
icon:
}
};
let variant = type;
let gotInvalidVariant = false;
if (!asideVariants.includes(type)) {
gotInvalidVariant = true;
variant = "danger";
}
const iconVariants = ["regular", "solid", "light", "thin", "sharp-solid", "duotone", "brands"];
if (!iconVariants.includes(iconType)) {
iconType = "regular";
}
return <>
Invalid type passed!
Received:
{type}
Expected one of:
{asideVariants.join(", ")}
{title}
} {children} }