728 lines
24 KiB
JavaScript
728 lines
24 KiB
JavaScript
"use client";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import {
|
|
FiCheckCircle,
|
|
FiAlertTriangle,
|
|
FiInfo,
|
|
FiDownload,
|
|
FiExternalLink,
|
|
} from "react-icons/fi";
|
|
|
|
const SEOChecker = () => {
|
|
const searchParams = useSearchParams();
|
|
const site = searchParams.get("site");
|
|
|
|
const [url, setUrl] = useState(site);
|
|
const [seoData, setSeoData] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
const [activeTab, setActiveTab] = useState("summary");
|
|
const submitRef = useRef();
|
|
|
|
useEffect(() => {
|
|
if (site) {
|
|
submitRef.current.click();
|
|
}
|
|
}, [site])
|
|
|
|
const checkSEO = async () => {
|
|
if (!url) {
|
|
setError("Please enter a URL");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
setSeoData(null);
|
|
|
|
try {
|
|
const response = await fetch("/api/seo-check", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ url }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.error || "Failed to analyze URL");
|
|
}
|
|
|
|
const data = await response.json();
|
|
setSeoData(data);
|
|
setActiveTab("summary");
|
|
} catch (err) {
|
|
setError(err.message || "Failed to check SEO");
|
|
console.error("SEO check error:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const calculateScores = (data) => {
|
|
if (!data) return { score: 0, deductions: [], categoryScores: {} };
|
|
|
|
let score = 100;
|
|
const deductions = [];
|
|
|
|
// Title (15 points)
|
|
if (!data.title.exists) {
|
|
score -= 15;
|
|
deductions.push({
|
|
item: "Title Tag",
|
|
points: -15,
|
|
message: "Missing completely",
|
|
});
|
|
} else {
|
|
if (data.title.text.length < 30) {
|
|
score -= 7;
|
|
deductions.push({
|
|
item: "Title Length",
|
|
points: -7,
|
|
message: "Too short (under 30 chars)",
|
|
});
|
|
} else if (data.title.text.length > 60) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "Title Length",
|
|
points: -5,
|
|
message: "Too long (over 60 chars)",
|
|
});
|
|
}
|
|
}
|
|
|
|
// Meta Description (10 points)
|
|
if (!data.meta.description.exists) {
|
|
score -= 10;
|
|
deductions.push({
|
|
item: "Meta Description",
|
|
points: -10,
|
|
message: "Missing completely",
|
|
});
|
|
} else {
|
|
if (data.meta.description.text.length < 50) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "Meta Description",
|
|
points: -5,
|
|
message: "Too short (under 50 chars)",
|
|
});
|
|
} else if (data.meta.description.text.length > 160) {
|
|
score -= 3;
|
|
deductions.push({
|
|
item: "Meta Description",
|
|
points: -3,
|
|
message: "Too long (over 160 chars)",
|
|
});
|
|
}
|
|
}
|
|
|
|
// Headings (15 points)
|
|
if (data.headings.h1.count === 0) {
|
|
score -= 10;
|
|
deductions.push({
|
|
item: "H1 Heading",
|
|
points: -10,
|
|
message: "Missing H1 tag",
|
|
});
|
|
} else if (data.headings.h1.count > 1) {
|
|
score -= 7;
|
|
deductions.push({
|
|
item: "H1 Heading",
|
|
points: -7,
|
|
message: "Multiple H1 tags",
|
|
});
|
|
}
|
|
|
|
if (data.headings.h2.count < 2) {
|
|
score -= 3;
|
|
deductions.push({
|
|
item: "H2 Headings",
|
|
points: -3,
|
|
message: "Not enough H2 tags",
|
|
});
|
|
}
|
|
|
|
// Images (10 points)
|
|
if (data.images?.withoutAlt > 0) {
|
|
const deduction = Math.min(10, data.images.withoutAlt * 2);
|
|
score -= deduction;
|
|
deductions.push({
|
|
item: "Image Alt Tags",
|
|
points: -deduction,
|
|
message: `${data.images.withoutAlt} images missing alt text`,
|
|
});
|
|
}
|
|
|
|
// Links (10 points)
|
|
if (data.links?.internal < 5) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "Internal Links",
|
|
points: -5,
|
|
message: "Few internal links",
|
|
});
|
|
}
|
|
|
|
if (data.links?.external === 0) {
|
|
score -= 2;
|
|
deductions.push({
|
|
item: "External Links",
|
|
points: -2,
|
|
message: "No external links",
|
|
});
|
|
}
|
|
|
|
// Mobile (10 points)
|
|
if (!data.meta?.viewport?.mobileFriendly) {
|
|
score -= 10;
|
|
deductions.push({
|
|
item: "Mobile Friendly",
|
|
points: -10,
|
|
message: "No responsive viewport",
|
|
});
|
|
}
|
|
|
|
// Performance (10 points)
|
|
if (data.pageLoadTime > 3) {
|
|
const deduction = Math.min(10, Math.floor(data.pageLoadTime - 2) * 2);
|
|
score -= deduction;
|
|
deductions.push({
|
|
item: "Page Speed",
|
|
points: -deduction,
|
|
message: `Slow load time (${data.pageLoadTime}s)`,
|
|
});
|
|
}
|
|
|
|
// Technical SEO (20 points)
|
|
if (!data.technical?.canonical?.exists) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "Canonical URL",
|
|
points: -5,
|
|
message: "Missing canonical tag",
|
|
});
|
|
}
|
|
|
|
if (!data.security?.https) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "HTTPS",
|
|
points: -5,
|
|
message: "Not using HTTPS",
|
|
});
|
|
}
|
|
|
|
if (data.technical?.schemaMarkup?.count === 0) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "Schema Markup",
|
|
points: -5,
|
|
message: "Missing structured data",
|
|
});
|
|
}
|
|
|
|
if (!data.meta?.robots?.content) {
|
|
score -= 5;
|
|
deductions.push({
|
|
item: "Robots Meta",
|
|
points: -5,
|
|
message: "Missing robots meta tag",
|
|
});
|
|
}
|
|
|
|
// Calculate category scores
|
|
const categoryScores = {
|
|
onPage: calculateOnPageScore(data),
|
|
technical: calculateTechnicalScore(data),
|
|
content: calculateContentScore(data),
|
|
mobile: calculateMobileScore(data),
|
|
};
|
|
|
|
return {
|
|
score: Math.max(0, Math.round(score)),
|
|
deductions,
|
|
categoryScores,
|
|
};
|
|
};
|
|
|
|
const calculateOnPageScore = (data) => {
|
|
let score = 30;
|
|
if (!data.title.exists) score -= 15;
|
|
if (!data.meta.description.exists) score -= 10;
|
|
if (data.headings.h1.count !== 1) score -= 5;
|
|
return Math.max(0, score);
|
|
};
|
|
|
|
const calculateTechnicalScore = (data) => {
|
|
let score = 30;
|
|
if (!data.technical.canonical.exists) score -= 5;
|
|
if (!data.security.https) score -= 5;
|
|
if (data.technical.schemaMarkup.count === 0) score -= 5;
|
|
if (!data.meta.robots.content) score -= 5;
|
|
return Math.max(0, score);
|
|
};
|
|
|
|
const calculateContentScore = (data) => {
|
|
let score = 20;
|
|
if (data.content.wordCount < 300) score -= 5;
|
|
if (data.content.readability < 60) score -= 5;
|
|
if (data.images.withoutAlt > 0) score -= 5;
|
|
return Math.max(0, score);
|
|
};
|
|
|
|
const calculateMobileScore = (data) => {
|
|
let score = 20;
|
|
if (!data.meta.viewport.mobileFriendly) score -= 10;
|
|
if (data.pageLoadTime > 3) score -= 5;
|
|
return Math.max(0, score);
|
|
};
|
|
|
|
const renderReportSection = () => {
|
|
if (!seoData) return null;
|
|
|
|
const { score, deductions, categoryScores } = calculateScores(seoData);
|
|
|
|
switch (activeTab) {
|
|
case "summary":
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<ScoreCard
|
|
title="Overall Score"
|
|
score={score}
|
|
max={100}
|
|
description="Composite SEO health score"
|
|
/>
|
|
<ScoreCard
|
|
title="On-Page SEO"
|
|
score={categoryScores.onPage}
|
|
max={30}
|
|
description="Title, meta, headings"
|
|
/>
|
|
<ScoreCard
|
|
title="Technical SEO"
|
|
score={categoryScores.technical}
|
|
max={30}
|
|
description="Canonical, schema, security"
|
|
/>
|
|
<ScoreCard
|
|
title="Content Quality"
|
|
score={categoryScores.content}
|
|
max={20}
|
|
description="Word count, readability"
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-white p-6 rounded-lg shadow">
|
|
<h3 className="text-lg font-semibold mb-4">
|
|
Key Recommendations
|
|
</h3>
|
|
<ul className="space-y-3">
|
|
{deductions
|
|
.sort((a, b) => a.points - b.points)
|
|
.map((item, i) => (
|
|
<li key={i} className="flex items-start">
|
|
{item.points < -7 ? (
|
|
<FiAlertTriangle className="text-red-500 mt-1 mr-2 flex-shrink-0" />
|
|
) : (
|
|
<FiInfo className="text-yellow-500 mt-1 mr-2 flex-shrink-0" />
|
|
)}
|
|
<div className="flex-1">
|
|
<div className="flex justify-between">
|
|
<span className="font-medium">{item.item}</span>
|
|
<span
|
|
className={`font-mono ${
|
|
item.points < 0
|
|
? "text-red-500"
|
|
: "text-green-500"
|
|
}`}
|
|
>
|
|
{item.points}
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-600 text-sm">{item.message}</p>
|
|
<div className="flex justify-between mt-1">
|
|
<span className="text-xs text-gray-500">
|
|
Priority:{" "}
|
|
{item.points < -7
|
|
? "High"
|
|
: item.points < -4
|
|
? "Medium"
|
|
: "Low"}
|
|
</span>
|
|
{item.item === "HTTPS" && !seoData.security.https && (
|
|
<a
|
|
href={`https://${seoData.url.replace(
|
|
/^https?:\/\//,
|
|
""
|
|
)}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-blue-500 flex items-center"
|
|
>
|
|
Try HTTPS <FiExternalLink className="ml-1" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "details":
|
|
return (
|
|
<div className="space-y-6">
|
|
<Section title="On-Page SEO">
|
|
<CheckItem
|
|
label="Title Tag"
|
|
status={seoData.title.exists ? "good" : "bad"}
|
|
goodText={`"${seoData.title.text}" (${seoData.title.text.length} chars)`}
|
|
badText="Missing"
|
|
recommendation="Include 1 title tag (50-60 chars)"
|
|
/>
|
|
<CheckItem
|
|
label="Meta Description"
|
|
status={seoData.meta.description.exists ? "good" : "bad"}
|
|
goodText={`"${seoData.meta.description.text}" (${seoData.meta.description.text.length} chars)`}
|
|
badText="Missing"
|
|
recommendation="Write a compelling description (120-160 chars)"
|
|
/>
|
|
<CheckItem
|
|
label="Heading Structure"
|
|
status={
|
|
seoData.headings.h1.count === 1 &&
|
|
seoData.headings.h2.count >= 2
|
|
? "good"
|
|
: "bad"
|
|
}
|
|
goodText={`1 H1 and ${seoData.headings.h2.count} H2 headings`}
|
|
badText={
|
|
seoData.headings.h1.count === 0
|
|
? "No H1 heading"
|
|
: seoData.headings.h1.count > 1
|
|
? "Multiple H1 headings"
|
|
: "Not enough H2 headings"
|
|
}
|
|
recommendation="Use one H1 and multiple H2s for proper structure"
|
|
/>
|
|
</Section>
|
|
|
|
<Section title="Technical SEO">
|
|
<CheckItem
|
|
label="Canonical URL"
|
|
status={seoData.technical.canonical.exists ? "good" : "bad"}
|
|
goodText={`Points to: ${seoData.technical.canonical.url}`}
|
|
badText="Missing"
|
|
recommendation="Add canonical URL tag to avoid duplicate content"
|
|
/>
|
|
<CheckItem
|
|
label="Schema Markup"
|
|
status={
|
|
seoData.technical.schemaMarkup.count > 0 ? "good" : "bad"
|
|
}
|
|
goodText={`${seoData.technical.schemaMarkup.count} schema items found`}
|
|
badText="Missing"
|
|
recommendation="Implement structured data for rich snippets"
|
|
/>
|
|
<CheckItem
|
|
label="HTTPS"
|
|
status={seoData.security.https ? "good" : "bad"}
|
|
goodText="Secure connection"
|
|
badText="Not secure"
|
|
recommendation="Install SSL certificate"
|
|
/>
|
|
</Section>
|
|
|
|
<Section title="Content Quality">
|
|
<CheckItem
|
|
label="Word Count"
|
|
status={seoData.content.wordCount >= 300 ? "good" : "bad"}
|
|
goodText={`${seoData.content.wordCount} words (good length)`}
|
|
badText={`${seoData.content.wordCount} words (too short)`}
|
|
recommendation="Aim for at least 300 words of quality content"
|
|
/>
|
|
<CheckItem
|
|
label="Readability"
|
|
status={seoData.content.readability >= 60 ? "good" : "bad"}
|
|
goodText={`Score: ${seoData.content.readability}/100 (good)`}
|
|
badText={`Score: ${seoData.content.readability}/100 (needs improvement)`}
|
|
recommendation="Simplify complex sentences and reduce jargon"
|
|
/>
|
|
<CheckItem
|
|
label="Image Alt Text"
|
|
status={seoData.images.withoutAlt === 0 ? "good" : "bad"}
|
|
goodText="All images have alt text"
|
|
badText={`${seoData.images.withoutAlt} images missing alt text`}
|
|
recommendation="Add descriptive alt text to all images"
|
|
/>
|
|
</Section>
|
|
</div>
|
|
);
|
|
|
|
case "full-report":
|
|
return (
|
|
<div className="space-y-8 bg-white p-6 rounded-lg shadow">
|
|
<div className="prose max-w-none">
|
|
<h2 className="text-2xl font-bold">Comprehensive SEO Report</h2>
|
|
<p className="text-gray-600">
|
|
Generated for {seoData.url} on{" "}
|
|
{new Date(seoData.analyzedAt).toLocaleString()}
|
|
</p>
|
|
|
|
<div className="my-6 p-4 bg-gray-50 rounded-lg">
|
|
<h3 className="text-xl font-semibold mb-2">
|
|
Executive Summary
|
|
</h3>
|
|
<p>
|
|
Overall SEO Score: <strong>{score}/100</strong> -{" "}
|
|
{score >= 80
|
|
? "Excellent"
|
|
: score >= 60
|
|
? "Good"
|
|
: score >= 40
|
|
? "Needs Improvement"
|
|
: "Poor"}
|
|
</p>
|
|
<p className="mt-2">
|
|
{score >= 80
|
|
? "Your site has strong SEO fundamentals."
|
|
: score >= 60
|
|
? "Your site has decent SEO but could use some improvements."
|
|
: score >= 40
|
|
? "Your site needs significant SEO improvements."
|
|
: "Your site requires urgent SEO attention."}
|
|
</p>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold mt-8 mb-4">
|
|
Detailed Findings
|
|
</h3>
|
|
|
|
<h4 className="font-semibold mt-6">On-Page SEO</h4>
|
|
<ul className="list-disc pl-5 space-y-2">
|
|
<li>
|
|
<strong>Title Tag:</strong>{" "}
|
|
{seoData.title.exists
|
|
? `"${seoData.title.text}" (${seoData.title.text.length} characters, ${seoData.title.status})`
|
|
: "Missing"}
|
|
</li>
|
|
<li>
|
|
<strong>Meta Description:</strong>{" "}
|
|
{seoData.meta.description.exists
|
|
? `"${seoData.meta.description.text}" (${seoData.meta.description.text.length} characters, ${seoData.meta.description.status})`
|
|
: "Missing"}
|
|
</li>
|
|
<li>
|
|
<strong>Headings:</strong> H1={seoData.headings.h1.count}, H2=
|
|
{seoData.headings.h2.count}, H3={seoData.headings.h3.count}
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 className="font-semibold mt-6">Technical SEO</h4>
|
|
<ul className="list-disc pl-5 space-y-2">
|
|
<li>
|
|
<strong>Canonical URL:</strong>{" "}
|
|
{seoData.technical.canonical.exists
|
|
? seoData.technical.canonical.url
|
|
: "Missing"}
|
|
</li>
|
|
<li>
|
|
<strong>Schema Markup:</strong>{" "}
|
|
{seoData.technical.schemaMarkup.count > 0
|
|
? `${seoData.technical.schemaMarkup.count} schema items found`
|
|
: "None detected"}
|
|
</li>
|
|
<li>
|
|
<strong>HTTPS:</strong>{" "}
|
|
{seoData.security.https ? "Enabled" : "Not enabled"}
|
|
</li>
|
|
</ul>
|
|
|
|
<h4 className="font-semibold mt-6">Contents</h4>
|
|
<ul className="list-disc pl-5 space-y-2">
|
|
<li>
|
|
<strong>Word Count:</strong> {seoData.content.wordCount} words
|
|
</li>
|
|
<li>
|
|
<strong>Images:</strong> {seoData.images.total} total,{" "}
|
|
{seoData.images.withoutAlt} missing alt text
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={() => window.print()}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center"
|
|
>
|
|
<FiDownload className="mr-2" />
|
|
Download PDF Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto p-6 bg-white rounded-lg shadow-lg">
|
|
<div className="mb-8">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<input
|
|
type="text"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
placeholder="Enter URL (e.g., https://example.com)"
|
|
className="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
onKeyDown={(e) => e.key === "Enter" && checkSEO()}
|
|
/>
|
|
<button
|
|
ref={submitRef}
|
|
onClick={checkSEO}
|
|
disabled={loading || !url}
|
|
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center min-w-[150px]"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<svg
|
|
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
Analyzing...
|
|
</>
|
|
) : (
|
|
"Run Full Analysis"
|
|
)}
|
|
</button>
|
|
</div>
|
|
{error && (
|
|
<p className="mt-2 text-sm text-red-600 flex items-center">
|
|
<FiAlertTriangle className="mr-1" /> {error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="text-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600">
|
|
Running comprehensive SEO analysis...
|
|
</p>
|
|
<p className="text-sm text-gray-500">This may take 10-15 seconds</p>
|
|
</div>
|
|
)}
|
|
|
|
{seoData && (
|
|
<>
|
|
<div className="border-b border-gray-200 mb-6">
|
|
<nav className="flex space-x-4 overflow-x-auto pb-2">
|
|
{["summary", "details", "full-report"].map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={`px-4 py-2 text-sm font-medium whitespace-nowrap ${
|
|
activeTab === tab
|
|
? "border-b-2 border-blue-500 text-blue-600"
|
|
: "text-gray-500 hover:text-gray-700"
|
|
}`}
|
|
>
|
|
{tab
|
|
.split("-")
|
|
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
|
.join(" ")}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{renderReportSection()}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Helper Components
|
|
const ScoreCard = ({ title, score, max, description }) => {
|
|
const percentage = (score / max) * 100;
|
|
const getColor = () => {
|
|
if (percentage >= 80) return "bg-green-500";
|
|
if (percentage >= 50) return "bg-yellow-500";
|
|
return "bg-red-500";
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg shadow border border-gray-100">
|
|
<h3 className="font-medium text-gray-700">{title}</h3>
|
|
<div className="flex items-end mt-2">
|
|
<span className="text-3xl font-bold mr-2">{score}</span>
|
|
<span className="text-gray-500">/ {max}</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2 mt-2">
|
|
<div
|
|
className={`h-2 rounded-full ${getColor()}`}
|
|
style={{ width: `${percentage}%` }}
|
|
></div>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-2">{description}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Section = ({ title, children }) => (
|
|
<div className="bg-white p-6 rounded-lg shadow">
|
|
<h3 className="text-lg font-semibold mb-4">{title}</h3>
|
|
<div className="space-y-4">{children}</div>
|
|
</div>
|
|
);
|
|
|
|
const CheckItem = ({ label, status, goodText, badText, recommendation }) => (
|
|
<div className="flex items-start">
|
|
<div className="mr-3 mt-1">
|
|
{status === "good" ? (
|
|
<FiCheckCircle className="text-green-500" />
|
|
) : (
|
|
<FiAlertTriangle className="text-red-500" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">{label}</p>
|
|
<p className="text-gray-600 text-sm">
|
|
{status === "good" ? goodText : badText}
|
|
</p>
|
|
{status !== "good" && recommendation && (
|
|
<p className="text-blue-600 text-sm mt-1">
|
|
Recommendation: {recommendation}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default SEOChecker;
|