@react95/core
Version:
Windows 95 styleguide
52 lines (51 loc) • 1.95 kB
JavaScript
import React, { forwardRef, useEffect } from "react";
import { User4, User2, User3, User5 } from "@react95/icons";
import { dialog, icon, message } from "./Alert.css.mjs";
import { Modal } from "../Modal/Modal.mjs";
import sound from "./assets/chord.mp3.mjs";
const RenderImage = ({ option }) => {
switch (option) {
case "info":
return /* @__PURE__ */ React.createElement(User5, { width: 32, height: 32, variant: "32x32_4" });
case "question":
return /* @__PURE__ */ React.createElement(User3, { width: 32, height: 32, variant: "32x32_4" });
case "warning":
return /* @__PURE__ */ React.createElement(User2, { width: 32, height: 32, variant: "32x32_4" });
case "error":
default:
return /* @__PURE__ */ React.createElement(User4, { width: 32, height: 32, variant: "32x32_4" });
}
};
const Alert = forwardRef(
({ type = "error", message: message$1, hasSound = false, dragOptions, ...rest }, ref) => {
if (hasSound) {
useEffect(() => {
const audio = new Audio(sound);
audio.play();
}, []);
}
return /* @__PURE__ */ React.createElement(
Modal,
{
height: "120",
dragOptions: {
defaultPosition: {
x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
},
...dragOptions
},
buttons: [{ value: "OK", onClick: () => {
} }],
hasWindowButton: false,
buttonsAlignment: "center",
...rest,
ref
},
/* @__PURE__ */ React.createElement(Modal.Content, { className: dialog }, /* @__PURE__ */ React.createElement("div", { className: icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: message }, message$1))
);
}
);
export {
Alert
};