@actuate-media/cms-admin 0.74.0 → 0.75.0

package/src/components/seo/SeoAnalysisList.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { AlertCircle, CheckCircle2, Sparkles, Wand2 } from 'lucide-react'
+import type { SEOCheck } from '@actuate-media/cms-core/seo/analysis'
+
+export function SeoAnalysisList({
+  checks,
+  onAiFixField,
+  aiFixField,
+}: {
+  checks: SEOCheck[]
+  onAiFixField?: (field: 'metaTitle' | 'metaDescription' | 'focusKeyword') => void
+  aiFixField?: string | null
+}) {
+  const problems = checks.filter((c) => c.status === 'problem' || c.status === 'improvement')
+  const good = checks.filter((c) => c.status === 'good')
+
+  if (checks.length === 0) {
+    return (
+      <p className="text-[12px] text-[var(--muted)]">
+        Add content and a focus keyphrase to run SEO checks.
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {problems.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-[11px] font-semibold tracking-wide text-[var(--sub)] uppercase">
+            Problems ({problems.length})
+          </h4>
+          <ul className="space-y-2">
+            {problems.map((check) => (
+              <AnalysisRow
+                key={check.id}
+                check={check}
+                onAiFix={onAiFixField}
+                aiBusy={aiFixField}
+              />
+            ))}
+          </ul>
+        </div>
+      )}
+      {good.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-[11px] font-semibold tracking-wide text-[var(--sub)] uppercase">
+            Good results ({good.length})
+          </h4>
+          <ul className="space-y-2">
+            {good.map((check) => (
+              <AnalysisRow key={check.id} check={check} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AnalysisRow({
+  check,
+  onAiFix,
+  aiBusy,
+}: {
+  check: SEOCheck
+  onAiFix?: (field: 'metaTitle' | 'metaDescription' | 'focusKeyword') => void
+  aiBusy?: string | null
+}) {
+  const tone =
+    check.status === 'good'
+      ? 'text-[var(--suc)]'
+      : check.status === 'improvement'
+        ? 'text-[var(--warn)]'
+        : 'text-[var(--err)]'
+  const Icon = check.status === 'good' ? CheckCircle2 : AlertCircle
+  const aiField = aiFieldForCheck(check.id)
+
+  return (
+    <li className="flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-2">
+      <Icon className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${tone}`} aria-hidden />
+      <div className="min-w-0 flex-1">
+        <div className="text-[12.5px] font-medium text-[var(--txt)]">{check.title}</div>
+        <p className="text-[11.5px] text-[var(--sub)]">{check.description}</p>
+      </div>
+      {onAiFix && aiField && check.status !== 'good' && (
+        <button
+          type="button"
+          aria-label={`AI help for ${check.title}`}
+          disabled={Boolean(aiBusy)}
+          onClick={() => onAiFix(aiField)}
+          className="inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+        >
+          {aiBusy === aiField ? (
+            <Sparkles className="h-3 w-3 animate-pulse" aria-hidden />
+          ) : (
+            <Wand2 className="h-3 w-3" aria-hidden />
+          )}
+          AI
+        </button>
+      )}
+    </li>
+  )
+}
+
+function aiFieldForCheck(checkId: string): 'metaTitle' | 'metaDescription' | 'focusKeyword' | null {
+  if (checkId.includes('meta-title') || checkId.includes('keyphrase-in-title')) return 'metaTitle'
+  if (checkId.includes('meta-description') || checkId.includes('keyphrase-in-meta-description')) {
+    return 'metaDescription'
+  }
+  if (checkId.includes('keyphrase')) return 'focusKeyword'
+  return null
+}