84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import type { OptimizedArticle } from "../lib/domain/types";
|
|
|
|
interface OptimizedPreviewProps {
|
|
article: OptimizedArticle | null;
|
|
jobId: string | null;
|
|
exportBlocked: boolean;
|
|
}
|
|
|
|
const exportFiles = ["optimized.md", "optimized.docx", "qa_report.json"];
|
|
|
|
export function OptimizedPreview({
|
|
article,
|
|
jobId,
|
|
exportBlocked,
|
|
}: OptimizedPreviewProps) {
|
|
if (!article) {
|
|
return (
|
|
<section className="panel empty-panel">
|
|
<div className="panel-heading">Optimized Result</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="panel stack">
|
|
<div className="panel-heading">Optimized Result</div>
|
|
<article className="preview">
|
|
<h2>{article.title}</h2>
|
|
<p>{article.summary}</p>
|
|
<pre>{article.body_markdown}</pre>
|
|
</article>
|
|
<div>
|
|
<h3>Image suggestions</h3>
|
|
<ul>
|
|
{article.image_suggestions.map((item) => (
|
|
<li key={item.source}>
|
|
<strong>{item.source}</strong>: {item.suggestion}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Changed sections</h3>
|
|
<div className="tag-row">
|
|
{article.changed_sections.map((section) => (
|
|
<span className="tag" key={section}>
|
|
{section}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{article.requires_user_confirmation.length > 0 && (
|
|
<div>
|
|
<h3>Needs confirmation</h3>
|
|
<ul>
|
|
{article.requires_user_confirmation.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
<div className="export-row">
|
|
{exportFiles.map((fileName) =>
|
|
jobId && !exportBlocked ? (
|
|
<a
|
|
className="download-link"
|
|
href={`/api/jobs/${jobId}/exports/${fileName}`}
|
|
key={fileName}
|
|
>
|
|
{fileName}
|
|
</a>
|
|
) : (
|
|
<button disabled key={fileName} type="button">
|
|
{fileName}
|
|
</button>
|
|
),
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|