Message Box Wiki (#5831)

* propose message box * added hyperlink capability * minor tweaks --------- Co-authored-by: Radha <[email protected]>
w3f · Apr 25, 2024 · cc5e55e · cc5e55e
1 parent efb5c54
commit cc5e55e
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git a/components/MessageBox.css b/components/MessageBox.css
@@ -0,0 +1,27 @@
+/* src/css/messageBox.css */
+
+.message-box {
+    position: fixed;
+    bottom: 20px;
+    right: 10px;
+    background-color: hwb(0 80% 2%);
+    z-index: 1000; /* Set a high z-index value */
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 270px; /* Adjust width as needed */
+  }
+
+  .close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+  } 
+
+  .messageContent {
+    margin-top: 10px;
+  }
diff --git a/components/MessageBox.jsx b/components/MessageBox.jsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+const MessageBox = ({ message }) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  // Function to convert markdown links to HTML links
+  const renderMarkdownLinks = (text) => {
+    return text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div className="message-box">
+          <button className="close-button" onClick={handleClose}>
+            &#10006; {/* Unicode character for "x" */}
+          </button>
+          <div
+            className="message-content"
+            dangerouslySetInnerHTML={{ __html: renderMarkdownLinks(message) }} // Render HTML content
+          ></div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MessageBox;
diff --git a/docs/maintain/archive/maintain-guides-democracy.md b/docs/maintain/archive/maintain-guides-democracy.md
@@ -7,13 +7,11 @@ keywords: [democracy, council, action, proposal]
 slug: ../maintain-guides-democracy
 ---
 
-<div className="sticky" style={{ zIndex: 1 }}> 
-<br />
+import MessageBox from "../../../components/MessageBox"; import
+"../../../components/MessageBox.css";
 
-The content on this page is archived. For up-to-date information about governance, see the
-[Polkadot OpenGov page](../../learn/learn-polkadot-opengov.md).
-
-</div>
+<MessageBox message="The content on this page is archived. For up-to-date information about governance, see the
+[Polkadot OpenGov page](../../learn/learn-polkadot-opengov.md)." />
 
 The public referenda chamber is one of the three bodies of on-chain governance as it's instantiated
 in Polkadot and Kusama. The other two bodies are the