hãy tạo một trang reactjs với tính năng cho phép admin load nội dung help từ file .html hoặc txt, sau đó hiện lên UI cho user, nếu login bằng admin thì hiện link edit --> click vào link này thì mở ra dialog để admin sửa nội dung help trong một HtmlEditor

components/HelpSystem.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import DOMPurify from 'dompurify';
+import { Editor } from '@tinymce/tinymce-react';
+
+const HelpSystem = ({ isAdmin = false }) => {
+  const [helpContent, setHelpContent] = useState('');
+  const [editMode, setEditMode] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Load help content from API or file
+  useEffect(() => {
+    const loadHelpContent = async () => {
+      try {
+        const response = await fetch('/api/help');
+        if (!response.ok) throw new Error('Failed to load help content');
+        const data = await response.text();
+        setHelpContent(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadHelpContent();
+  }, []);
+
+  const handleSave = async (newContent) => {
+    try {
+      const response = await fetch('/api/help', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ content: newContent }),
+      });
+      
+      if (!response.ok) throw new Error('Failed to save help content');
+      
+      setHelpContent(newContent);
+      setEditMode(false);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  if (loading) return <div className="p-4 text-center">Loading help content...</div>;
+  if (error) return <div className="p-4 text-red-500">Error: {error}</div>;
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-bold text-gray-900 dark:text-white">Help Center</h2>
+        {isAdmin && !editMode && (
+          <button
+            onClick={() => setEditMode(true)}
+            className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+          >
+            Edit Content
+          </button>
+        )}
+      </div>
+
+      {editMode ? (
+        <div className="space-y-4">
+          <Editor
+            apiKey="your-tinymce-api-key"
+            value={helpContent}
+            init={{
+              height: 500,
+              menubar: true,
+              plugins: [
+                'advlist autolink lists link image charmap print preview anchor',
+                'searchreplace visualblocks code fullscreen',
+                'insertdatetime media table paste code help wordcount'
+              ],
+              toolbar:
+                'undo redo | formatselect | bold italic backcolor | \
+                alignleft aligncenter alignright alignjustify | \
+                bullist numlist outdent indent | removeformat | help'
+            }}
+            onEditorChange={(newContent) => setHelpContent(newContent)}
+          />
+          <div className="flex space-x-3">
+            <button
+              onClick={() => handleSave(helpContent)}
+              className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600"
+            >
+              Save Changes
+            </button>
+            <button
+              onClick={() => setEditMode(false)}
+              className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="prose dark:prose-invert max-w-none"
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(helpContent) }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default HelpSystem;