45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import { alertDialog } from "./state.js";
|
|
import { van } from "./van.js";
|
|
const { div, span } = van.tags;
|
|
|
|
export function Alert() {
|
|
const color = van.state("bg-orange-100 text-orange-700 border-orange-500");
|
|
|
|
van.derive(() => {
|
|
if (alertDialog.val.time > 0) {
|
|
switch (alertDialog.val.type) {
|
|
case "error":
|
|
color.val = "bg-red-100 text-red-700 border-red-500";
|
|
break;
|
|
case "success":
|
|
color.val = "bg-green-100 text-green-700 border-green-500";
|
|
break;
|
|
case "info":
|
|
color.val = "bg-blue-100 text-blue-700 border-blue-500";
|
|
break;
|
|
case "warning":
|
|
default:
|
|
color.val = "bg-orange-100 text-orange-700 border-orange-500";
|
|
break;
|
|
}
|
|
setTimeout(() => {
|
|
alertDialog.val = { text: "", time: 0 };
|
|
}, alertDialog.val.time);
|
|
}
|
|
});
|
|
|
|
return div(
|
|
{
|
|
class: () =>
|
|
"absolute z-[100] bottom-8 flex justify-center w-full " +
|
|
(alertDialog.val.text ? "" : "hidden"),
|
|
},
|
|
div(
|
|
{
|
|
class: () => `${color.val} border-t-4 rounded-sm p-2`,
|
|
},
|
|
() => span(alertDialog.val.text)
|
|
)
|
|
);
|
|
}
|