Create components/DocumentCheckerResults.jsx

components/DocumentCheckerResults.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
+
+const DocumentCheckerResults = ({ results }) => {
+  if (!results) {
+    return (
+      <div className="p-4 text-gray-600">
+        Results will appear here after processing...
+      </div>
+    );
+  }
+
+  // Parse the markdown-style results into sections
+  const sections = results.split('■').filter(Boolean);
+  const headerSection = sections[0];
+  const issuesSections = sections.slice(1);
+
+  return (
+    <div className="max-w-4xl mx-auto p-4 space-y-6">
+      {/* Header Section */}
+      <div className="border-b border-gray-200 pb-4">
+        <h1 className="text-2xl font-bold text-gray-800 mb-4">
+          Document Check Results Summary
+        </h1>
+        {headerSection.includes("All checks passed") ? (
+          <div className="flex items-center gap-2 text-green-600">
+            <CheckCircle className="w-5 h-5" />
+            <span className="font-medium">All checks passed successfully!</span>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 text-amber-600">
+            <AlertTriangle className="w-5 h-5" />
+            <span className="font-medium">
+              {headerSection.match(/Found (\d+) categories/)?.[0] || "Issues found"}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Issues Sections */}
+      <div className="space-y-6">
+        {issuesSections.map((section, index) => {
+          const [title, ...content] = section.split('\n').filter(Boolean);
+          const [description, howToFix, ...examples] = content;
+
+          return (
+            <div key={index} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+              {/* Section Header */}
+              <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
+                <h2 className="text-lg font-semibold text-gray-800">{title.trim()}</h2>
+                <p className="text-sm text-gray-600 mt-1">{description?.trim()}</p>
+              </div>
+
+              {/* How to Fix */}
+              <div className="px-4 py-3 bg-green-50">
+                <div className="flex items-start gap-2">
+                  <div className="mt-1">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                  </div>
+                  <div>
+                    <span className="font-medium text-green-800">How to fix: </span>
+                    <span className="text-green-700">{howToFix?.replace('How to fix:', '').trim()}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Examples */}
+              <div className="px-4 py-3 border-t border-gray-200">
+                <h3 className="font-medium text-gray-800 mb-2">Example Fix:</h3>
+                <div className="space-y-2 ml-4">
+                  <div className="flex items-start gap-2">
+                    <XCircle className="w-4 h-4 text-red-500 mt-1" />
+                    <div className="text-red-600">
+                      Incorrect: {examples[1]?.replace('❌ Incorrect:', '').trim()}
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <CheckCircle className="w-4 h-4 text-green-600 mt-1" />
+                    <div className="text-green-600">
+                      Correct: {examples[2]?.replace('✓ Correct  :', '').trim()}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Issues Found */}
+              <div className="px-4 py-3 border-t border-gray-200">
+                <h3 className="font-medium text-gray-800 mb-2">Issues found in your document:</h3>
+                <ul className="space-y-1 ml-4">
+                  {examples.slice(4).map((issue, i) => {
+                    if (issue.includes('more similar issues')) {
+                      return (
+                        <li key={i} className="text-gray-500 italic mt-2">
+                          {issue.trim()}
+                        </li>
+                      );
+                    }
+                    return (
+                      <li key={i} className="text-gray-600">
+                        • {issue.replace('•', '').trim()}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Summary Section */}
+      {!headerSection.includes("All checks passed") && (
+        <div className="mt-8 border-t border-gray-200 pt-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">Summary and Recommendations</h2>
+          
+          <div className="space-y-4">
+            <div>
+              <h3 className="font-medium text-gray-800 mb-2">Priority Order for Fixes:</h3>
+              <ul className="space-y-1 ml-4">
+                <li className="text-red-600">1. Critical: Heading formats, required content, and document structure</li>
+                <li className="text-amber-600">2. Important: Terminology, acronyms, and references</li>
+                <li className="text-green-600">3. Standard: Formatting, spacing, and style consistency</li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="font-medium text-gray-800 mb-2">Next Steps:</h3>
+              <ul className="space-y-1 ml-4 text-gray-600">
+                <li>1. Address issues in priority order</li>
+                <li>2. Use search/replace for consistent fixes</li>
+                <li>3. Re-run checker after making changes</li>
+                <li>4. Update your document template if needed</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DocumentCheckerResults;