tasks to published refactor

frontend/src/components/common/ContentViewerModal.tsx

@@ -0,0 +1,61 @@
+/**
+ * ContentViewerModal - Display content HTML in a modal
+ */
+
+import { Modal } from '../ui/modal';
+import { CloseIcon } from '../../icons';
+
+interface ContentViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  contentHtml: string;
+}
+
+export default function ContentViewerModal({
+  isOpen,
+  onClose,
+  title,
+  contentHtml,
+}: ContentViewerModalProps) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      className="max-w-4xl w-full mx-4"
+    >
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+          >
+            <CloseIcon className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-6 max-h-[70vh] overflow-y-auto">
+          <div
+            className="prose dark:prose-invert max-w-none"
+            dangerouslySetInnerHTML={{ __html: contentHtml }}
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}