add warn-alert

src/components/Common/WarnAlert/index.jsx

@@ -0,0 +1,20 @@
+// import cls from "./index.module.css";
+import "./warn-alert.css";
+import AlertIcon from "./warn-icon.png";
+
+function WarnAlert(props) {
+  return (
+    <div className="warn-alert">
+      <h1 className="">
+        <img src={AlertIcon} width={24} alt="icon" />
+        {props.title || "test"}
+      </h1>
+      <p>
+        {props.content ||
+          "Lorem ipsum dolor sit amet consectetur."}
+      </p>
+    </div>
+  );
+}
+
+export default WarnAlert;

src/components/Common/WarnAlert/warn-alert.css

@@ -0,0 +1,58 @@
+.warn-alert {
+  position: fixed;
+  top: 200px;
+  left: 200px;
+  /* height: 72px; */
+  z-index: 10000;
+  display: inline-block;
+  /* background: url(../../../assets/warn-bg.png) 0 0 / 116px 100% repeat-x; */
+  background: url(./3.png) 0 0 / 116px 100% repeat-x;
+  box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.5);
+  user-select: none;
+  transform: scale(.64);
+}
+
+.warn-alert::before {
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -24px;
+  width: 24px;
+  height: 100%;
+  display: inline-block;
+  border: 12px solid transparent;
+  border-right-color: #ff2c2c;
+}
+.warn-alert::after {
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -24px;
+  width: 24px;
+  height: 100%;
+  display: inline-block;
+  border: 12px solid transparent;
+  border-left-color: #ff2c2c;
+}
+
+.warn-alert > h1 {
+  display: flex;
+  margin: 8px 0 0;
+  align-items: center;
+  color: #fff;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+.warn-alert > h1 img {
+  padding-top: 3px;
+  margin-left: 10px;
+}
+
+.warn-alert > p {
+  color: #fff;
+  margin: 0 22px 16px 14px;
+  font-size: 14px;
+}