From cc5e55ecf6d4748c999fbda41f54d07953bbca2d Mon Sep 17 00:00:00 2001
From: Filippo <110459737+filippoweb3@users.noreply.github.com>
Date: Thu, 25 Apr 2024 19:16:15 +0200
Subject: [PATCH] Message Box Wiki (#5831)

* propose message box

* added hyperlink capability

* minor tweaks

---------

Co-authored-by: Radha <86818441+DrW3RK@users.noreply.github.com>
---
 components/MessageBox.css                     | 27 ++++++++++++++++
 components/MessageBox.jsx                     | 32 +++++++++++++++++++
 .../archive/maintain-guides-democracy.md      | 10 +++---
 3 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 components/MessageBox.css
 create mode 100644 components/MessageBox.jsx

diff --git a/components/MessageBox.css b/components/MessageBox.css
new file mode 100644
index 000000000000..cfbec6759482
--- /dev/null
+++ 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;
+  }
\ No newline at end of file
diff --git a/components/MessageBox.jsx b/components/MessageBox.jsx
new file mode 100644
index 000000000000..820b8cb4369d
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/docs/maintain/archive/maintain-guides-democracy.md b/docs/maintain/archive/maintain-guides-democracy.md
index d60848350690..2ddbf26addae 100644
--- 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