feat(docs) : Feedback Form for documentation (#3327)

* Add Feedback Form Component

docs/site/src/components/FeedbackForm/index.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import clsx from "clsx";
+import "./styles.css";
+
+const FeedbackForm = () => {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const prefixedTitle = `Docs feedback: ${title}`;
+    const githubNewIssueUrl = `https://github.com/iotaledger/devx/issues/new?template=doc-bug.md&title=${encodeURIComponent(prefixedTitle)}&body=${encodeURIComponent(body)}`;
+
+    // Open the GitHub issue page with pre-filled data in a new tab
+    window.open(githubNewIssueUrl, '_blank');
+    setTitle("");
+    setBody("");
+  };
+
+  return (
+    <div className="feedback-container">
+      <div className="divider"></div>
+      <div className={clsx("h3", "feedback-header")}>Feedback Form</div>
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="issue">Title <span className="red">*</span></label>
+          <input
+            type="text"
+            id="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            className="input-field"
+            placeholder='Enter Title'
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="body">Describe your feedback here</label>
+          <textarea
+            id="body"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            required
+            className="textarea-field"
+            placeholder='Enter Text'
+          />
+        </div>
+        <button
+          className={clsx("button", { "button-disabled": !title })}
+          type="submit"
+          disabled={!title}
+        >
+          Submit Feedback
+        </button>
+      </form>
+      <div className="divider"></div>
+    </div>
+  );
+};
+
+export default FeedbackForm;

docs/site/src/components/FeedbackForm/styles.css

@@ -0,0 +1,56 @@
+.feedback-container {
+  /* margin: 20px; */
+}
+
+.feedback-header {
+  font-size: 30px;
+  margin: 20px 0;
+}
+.red{
+  color: red;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+  gap: 5px;
+}
+
+.input-field {
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.textarea-field {
+  padding: 10px;
+  font-size: 16px;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  resize: vertical;
+}
+
+.submit-button {
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.submit-button:hover {
+  background-color: #0056b3;
+}
+
+[data-theme="light"] .divider {
+  border-top: 1px solid var(--ifm-toc-border-color);;
+}
+
+.divider {
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  margin: 20px 0;
+}
+

docs/site/src/theme/MDXContent/index.tsx

@@ -10,6 +10,7 @@ import type { Props } from '@theme/MDXContent';
 import { Card, Cards } from "@site/src/components/Cards";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import FeedbackForm from "@site/src/components/FeedbackForm"; 
 
 export default function MDXContent({ children }: Props): JSX.Element {
   const components = {
@@ -19,5 +20,10 @@ export default function MDXContent({ children }: Props): JSX.Element {
     Tabs,
     TabItem,
   };
-  return <MDXProvider components={components}>{children}</MDXProvider>;
+  return (
+    <MDXProvider components={components}>
+      {children}
+      <FeedbackForm /> 
+    </MDXProvider>
+  );
 }