import React, { useState } from 'react';
import { AlertTriangle, CheckCircle, XCircle, Info, ChevronDown, ChevronUp } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
const SEOAnalyzer = () => {
const [url, setUrl] = useState('');
const [content, setContent] = useState('');
const [loading, setLoading] = useState(false);
const [results, setResults] = useState(null);
const [expandedSections, setExpandedSections] = useState({});
const analyzeSEO = async (e) => {
e.preventDefault();
setLoading(true);
// Simulate analysis with setTimeout
setTimeout(() => {
const analysisResults = {
score: 75,
sections: {
meta: {
status: 'warning',
score: 70,
issues: [
'Meta description is too short (current: 120 characters, recommended: 150-160)',
'Meta title could be more descriptive'
]
},
headings: {
status: 'passed',
score: 90,
issues: []
},
content: {
status: 'critical',
score: 60,
issues: [
'Keyword density is too low (0.5%)',
'Content length is below recommended minimum'
]
},
links: {
status: 'warning',
score: 80,
issues: [
'Found 2 broken internal links',
'External links missing rel attributes'
]
}
}
};
setResults(analysisResults);
setLoading(false);
}, 2000);
};
const toggleSection = (section) => {
setExpandedSections(prev => ({
...prev,
[section]: !prev[section]
}));
};
const getStatusIcon = (status) => {
switch (status) {
case 'passed':
return
;
case 'warning':
return
;
case 'critical':
return
;
default:
return
;
}
};
return (
SEO Analysis Dashboard
{results && (
Overall SEO Health Score
{results.score}/100
{Object.entries(results.sections).map(([section, data]) => (
toggleSection(section)}
className="w-full flex items-center justify-between"
>
{getStatusIcon(data.status)}
{section}
{expandedSections[section] ? : }
{expandedSections[section] && (
Score: {data.score}/100
{data.issues.length > 0 && (
{data.issues.map((issue, index) => (
{issue}
))}
)}
)}
))}
)}
);
};
export default SEOAnalyzer;