Spaces:
Sleeping
Sleeping
File size: 5,817 Bytes
c01ce36 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 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; |