123
This commit is contained in:
@@ -17,7 +17,8 @@
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Content, fetchImages, ImageRecord } from '../services/api';
|
||||
import { ArrowLeftIcon, CalendarIcon, TagIcon, FileTextIcon, CheckCircleIcon, XCircleIcon, ClockIcon } from '../icons';
|
||||
import { ArrowLeftIcon, CalendarIcon, TagIcon, FileTextIcon, CheckCircleIcon, XCircleIcon, ClockIcon, PencilIcon, ImageIcon, BoltIcon } from '../icons';
|
||||
import { useNavigate } from 'react-router';
|
||||
|
||||
interface ContentViewTemplateProps {
|
||||
content: Content | null;
|
||||
@@ -430,6 +431,7 @@ const ArticleBody = ({ introHtml, sections, sectionImages, imagesLoading, rawHtm
|
||||
};
|
||||
|
||||
export default function ContentViewTemplate({ content, loading, onBack }: ContentViewTemplateProps) {
|
||||
const navigate = useNavigate();
|
||||
const [imageRecords, setImageRecords] = useState<ImageRecord[]>([]);
|
||||
const [imagesLoading, setImagesLoading] = useState(false);
|
||||
const [imagesError, setImagesError] = useState<string | null>(null);
|
||||
@@ -900,6 +902,53 @@ export default function ContentViewTemplate({ content, loading, onBack }: Conten
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons - Conditional based on status */}
|
||||
{content.status && (
|
||||
<div className="px-8 py-6 bg-gray-50 dark:bg-gray-900/30 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Draft status: Show Edit Content + Generate Images */}
|
||||
{content.status.toLowerCase() === 'draft' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => navigate(`/sites/${content.site_id}/posts/${content.id}/edit`)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 hover:bg-brand-600 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
Edit Content
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate(`/writer/images?contentId=${content.id}`)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
<ImageIcon className="w-4 h-4" />
|
||||
Generate Images
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Review status: Show Edit Content + Publish */}
|
||||
{content.status.toLowerCase() === 'review' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => navigate(`/sites/${content.site_id}/posts/${content.id}/edit`)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 hover:bg-brand-600 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
Edit Content
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigate(`/writer/published?contentId=${content.id}&action=publish`)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium transition-colors"
|
||||
>
|
||||
<BoltIcon className="w-4 h-4" />
|
||||
Publish
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Image Status */}
|
||||
{(content.has_image_prompts || content.has_generated_images) && (
|
||||
<div className="px-8 py-4 bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
|
||||
|
||||
Reference in New Issue
Block a user